认识插槽Slot 如何使用插槽slot? 插槽的基本使用 插槽的默认内容 多个插槽的效果 App.vue <template> <div> <my-slot-cpn> <button>我是按钮</button> </my-slot-c
简介: vue3【实用教程】组件(含父子组件传值 defineProps,自定义事件 defineEmits,defineProps,插槽 slot,动态组件 :is 等) 选项式 API 定义组件 在一个单独的 .vue 文件中定义 child.vue export default { data() { return { count: 0 } } } <template> 点击了 {{ count }} 次 </template> ...
<my-slot-cpn> 我是普通的文本 </my-slot-cpn> <my-slot-cpn> <!-- 也可以插入组件 --> <my-button /> </my-slot-cpn> <!-- 没有插入对应的内容,那么会显示插槽默认的内容 --> <my-slot-cpn></my-slot-cpn> <!-- 插入很多的内容,每个插槽都会获取插入的内容来显示 --> <my-slot-cpn>...
import Child from './child.vue' 1. 注册 components: { Child } 1. 2. 3. 模板中渲染 <Child/> 1. 父组件给子组件传值 通过给子组件标签自定义属性来传递 <Child title="博客的标题" /> 1. 子组件接收父组件的传值 props 通过props选项声明子组件可以接收数据的属性名 props: ['title'] 1. 此...