vue 3.0 slot 使用方法

1：首先新建一个post组件

import { defineComponent, PropType } from 'vue'
//引入外部样式
import '../styles/post.css'
//定义传入组件数据的类型
interface Post {title: string,content: string,
}
export default defineComponent({name: 'post',props: {blog: {type: Object as PropType<Post>,default: () => {return {}}}},setup(props, { slots }) {return () => {return <div class="wrapper"><p>我是默认插槽:{slots.default && slots.default()}</p><p>我是具名插槽:{slots.foo && slots.foo()}</p><p>我是父组件传进来的参数:{props.blog.title}---{props.blog.content}</p></div>}}
})

2：然后在父组件中使用该组件

import { defineComponent, h, reactive, ref } from 'vue'
import post from './components/post'
const img = require('./assets/logo.png')//eslint-disable-line
export default defineComponent({compoments: {post},setup() {//父组件传入子组件插槽的内容const slots = {default: () => <span>default 默认插槽</span>,foo: () => <span>foo 具名插槽</span>}//父组件传入子组件的数据const blogData = reactive({title: '我是博客的标题',content: '我是博客的内容'})return () => {return <div id="app"><img src={img} alt="Welcome to Your Vue.js + TypeScript App" /><post v-slots={slots} blog={blogData}></post></div>}}
})

vue 3.0 slot 使用方法相关推荐

Vue 3.0 新特性及使用方法
介绍 2020年9月19日凌晨,尤雨溪大大正式发布了 Vue.js 3.0 版本,代号:One Piece.此框架新的主要版本提供了更好的性能.更小的捆绑包体积.更好的 TypeScript 集成.用 ...
Element 2.6.0 发布，基于 Vue 2.0 的桌面端组件库
开发四年只会写业务代码,分布式高并发都不会还做程序员? Element 2.6.0 发布了,Element 是一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,提供了配套设 ...
jsx怎么往js里传参数_实践Vue 3.0做JSX(TSX)风格的组件开发
作者:莫夭转发链接:https://zhuanlan.zhihu.com/p/102668383 前言我日常工作都是使用React来做开发,但是我对React一直不是很满意,特别是在推出React ...
vue clone html,Vue.js之slot深度复制详解
前言在Vue中,slot是一个很有用的特性,可以用来向组件内部插入一些内容.slot就是"插槽"的意思,用大白话说就是:定义组件的时候留几个口子,由用户来决定插入的内容. 例如我 ...
vue 1.0源代码重点难点分析
本文分析vue1.0源代码从入口开始到编译输出到网页显示生效的整个过程,并重点分析一些vue源代码设计原理. vue初始化根组件的入口代码: 对于没有路由的单页应用来说,入口就是new Vue(opt ...
vue 3.0学习1
vue 3.0学习一.vue 3.0 diff算法优化 1.vue 3.0六大亮点 2.vue 3.0 如何变快的? 1. diff方法优化 https://vue-next-template-ex ...
【Vue2-尚硅谷四】Vue ---ajax---插槽slot
文章目录 4.1,vue脚手架配置代理方法一方法二 4.2,GitHub搜索案例入口main.js App.vue Search.vue List.vue 4.3,slot插槽 4.3.1,默认 ...
Vue CLI3.0 中使用jQuery 和 Bootstrap
Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考. 在 Vue CLI2.0 中引入 jQuery 和 Boo ...
vue.js2.0 新手开发_VueJs2.0建议学习路线
最近VueJs确实火了一把,自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新手来说,如何高效快速的学习Vue2.0呢. 既然大家会看这篇文章,那么 ...

vue 3.0 slot 使用方法

vue 3.0 slot 使用方法相关推荐

最新文章

热门文章