【Vue插槽】

Vue插槽

什么是插槽?

插槽（slot）是Vue为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的，希望用户指定的部分定义为插槽

1、匿名插槽

将子组件导入到父组件，将父组件的值渲染给子组件，在子组件中使用slot标签占位。

 //在父组件中
  <div class="app">
      <!-- 渲染 Left 组件 -->
      <left>
        <template>
            <p>这是Left组件的内容区域，声明p标签</p>
        </template>
      </left>
    </div>

 //在子组件中
 <div class="left-container">
    <h3>Left 组件</h3>
    <hr>
     <!-- 声明一个插槽区域 -->
    <!-- 官方规定每一个slot插槽都要有一个name名称  默认name值为default -->
    <slot></slot>
  </div>

2、具名插槽

  //在父组件中
  <div class="app">
      <!-- 渲染 Left 组件 -->
      <left>
        <!-- 指定内容填充到指定名称的插槽中，使用v-slot: -->
        <!--1.v-solt：插槽的名字-->
        <!--2.v-solt：指令不能直接用在元素身上，必须用在template标签上-->
        <!--2.v-solt：简写是 # -->
        <template slot="a">
            <p>孩子给你一个礼物A</p>
        </template>
      </left>
    </div>

在子组件中
 <div class="left-container">
    <h3>Left 组件</h3>
    <hr>
     <!-- 声明一个插槽区域 -->
    <!-- 官方规定每一个slot插槽都要有一个name名称  默认name值为default -->
    <slot name="a"></slot>
  </div>

3、作用域插槽

将子组件的数据传递给父组件显示

<template>
    <div id="h2toggle">
      <div v-for="(item,index) in arr" :key="index">
         <slot name="a" :Valarr="item.title"></slot>
      </div>
    </div>
</template>

<script>

export default {
  name:"H2Toggle",
  data() {
    return {
      arr:[
        {title:"我是歌手1号"},
        {title:"我是演员2号"},
        {title:"我是学生3号"}
        ]
    }
  },
}
</script>

<template>
  <div id="app">
      <H2Toggle>
      <!--v-slot:a="scope"是vue.js2.6.0之前版本的写法-->
        <!-- <h2 slot="a" slot-scope="scope">
          {{scope.Valarr}}
        </h2> -->
		 <!--v-slot:a="scope"是vue.js2.6.0版本的写法-->
          <template v-slot:a="scope">
           <h2 @click="show(scope.Valarr)">
             {{scope.Valarr}}
             </h2>
          </template>  
      </H2Toggle>
  </div>
</template>

<script>
import H2Toggle from '@/components/H2Toggle.vue'
export default {
  name:"App",
  components:{
    H2Toggle
  },
  methods: {
    show(t){
      alert(t);
    }
  },
}
</script>