vue 插槽 slot
1、什么是插槽?
插件接收父组件内容分发,简单点就是:插槽就是子组件提供给父组件填充内容的占位符,父组件可以在slote占位符中填充任何模板代码,包括HTML、组件等,填充的内容会替换子组件的<slot></slot>标签
1、匿名插槽
子组件中放一个slot占位符
父组件写入想要的填充内容
结果
2、具名插槽:v-slot:name ,一个子组件可以放多个具名插槽,父组件通过 v-slot:name 一一对应进行内容分发
子组件:
父组件:
效果:
3、插槽传值
① 具名插槽 通过 v-slot: +插槽名+ ="自定义数据名",子组件所传参数都是其属性
② 匿名插槽 v-slot=“自定义数据名”
//父组件 <div> <h3>父组件</h3> <testChild> <template v-slot:test="data">//具名插槽,v-slot: +插槽名+ ="自定义数据名",子组件所传参数都是其属性 <ul> <li v-for="item in data.list2">{{item.name}}</li> </ul> </template> <template v-slot="dataDefalut">//默认插槽 {{dataDefalut.sName}} </template> </testChild> </div> //子组件 <template> <div> <h4>子组件</h4> <slot name="test" :list2="list2"></slot> <slot :sName="name"></slot> </div> </template> <script> export default { name: "testChild", data(){ return { list2:[ {name:'ccc'}, {name:'ddd'} ], name:'name' } } } </script>
效果: