vue组件插槽slot

插槽作用让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件

分类：默认插槽、具名插槽、作用域插槽

   1. 默认插槽：

父组件~~~~~~~~~~~~~~
<template>
    <anonymous-vue title="匿名插槽">
      <ul>
        <li v-for="(item,index) in dataList" :key="index">{{item}}</li>
      </ul>
    </anonymous-vue>
</template>
<script>
export default {
  data(){
    return {
      dataList:["茉莉花茶","毛尖","龙井","大红袍"]
    }
  }
}
</script>



子组件~~~~~~~~
<template>
    <div>
        <h2>{{title}}</h2>
        <slot></slot>
    </div>
</template>
<script>
export default {
    props:["title"],
}
</script>

  2. 具名插槽：

父组件~~~~~~~~~~~~~~~~·
<template>
    <slot-test title="具名插槽">
      <ul slot="demo1">
        <li v-for="(item,index) in dataList" :key="index">{{item}}</li>
      </ul>
      <template v-slot:demo2>
        <div class="atags">
          <a href="http://baidu.com">test1</a>
          <a href="http://baidu.com">test2</a>
          <a href="http://baidu.com">test3</a>
        </div>
      </template>
    </slot-test>
</template>
<script>
export default {
  data(){
    return {
      dataList:["茉莉花茶","毛尖","龙井","大红袍"]
    }
  }
}
</script>


子组件~~~~~~~~~~~~~~~~~~~~~~·
<template>
    <div class="name_slot">
        <h2>{{title}}</h2>
        <slot name="demo1"></slot>
        <hr/>
        <slot name="demo2"></slot>
    </div>
</template>
<script>
export default {
    props:["title"],
}
</script>

 3. 作用域插槽：

数据在子组件的自身，但根据数据生成的结构需要组件的使用者（即父组件）来决定。

子组件通过插槽传参的方式 <slot  :teas="teas"></slot>将teas数据传递给使用者，使用者通过<template scope="data"></template>   or  <template slot-scope="data"></template>的方式获取到data数据，例子中data数据是一个对象 { teas:["茉莉花茶","毛尖","龙井","大红袍"] }

父组件~~~~
<template>
    <action-scope title="作用域插槽">
      <!-- <template scope="row" slot="demo1"> 等价于下方写法 scope ->slot-scope -->
      <template slot-scope="row" slot="demo1">
        <ul>
          <li v-for="(item,index) in row.teas" :key="index">{{item}}</li>
        </ul>
      </template>
    </action-scope>
</template>

子组件
<template>
    <div class="name_slot">
        <h2>{{title}}</h2>
        <slot name="demo1" :teas="teas"></slot>
    </div>
</template>
<script>
export default {
    props:["title"],
    data(){
        return {
            teas:["茉莉花茶","毛尖","龙井","大红袍"]
        }
    }
}
</script>