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>

效果：

 

 

 代码举例2：参考www.cnblogs.com/mandy-dyf/p/11528505.html