vueslot的用法

slot基本都是用父组件index.vuecomponents:{son1:()=>import('./son1.vue'),}子组件son1.vue

Namedslotslot有一个name属性父组件index.vueI'mcontentI'm脚我很满足我是脚我是内容我是底部components:{son2:()=>import('./son2.vue'),}subcomponentson2.vue匿名槽又叫默认槽，单个槽不需要设置name属性，其隐藏的name属性为默认父组件index.vue我是内容我是底部我是头部的默认插槽components:{son3:()=>import('./son3.vue'),}subcomponentson3.vueScopeslotsScopeslots其实就是可以传递数据的slots。如果子组件中的某些数据要在父组件中使用，则必须通过指定的方法传递。官方文档中提出了一个规则，即父模板中的所有内容都在父范围内编译。子模板中的所有内容都在子范围内编译。如果在父组件中直接使用子组件中的值，会报错。父组件index.vue

《{{ item.name }}》

《{{ item.name }}》

《{{ item.name }}》

a:{{a}}

子组件son4.vuedata(){return{list:[{id:1,name:'三万国演义'},{id:2,name:'红楼梦'},{id:3,name:'西游记'},{id:4,name:'水浒传'}]}}