插槽

单个插槽/默认插槽/匿名插槽

• 可以放在组件任意位置
• 每个组件 只能有一个
• 不用设置name属性

<template>
    <div>
        <h2>Father</h2>
        <Child>
            <div>
              <span>Demo1</span>
              <span>Demo2</span>
              <span>Demo3</span>
              <span>Demo4</span>
              <span>Demo5</span>
              <span>Demo6</span>
            </div>
        </Child>
    </div>
</template>

<template>
    <div>
        <h2>Child</h2>
        <slot />
    </div>
</template>

具名插槽

• 可以出现在组件任何地方
• 可以使用多次
• 有name属性

• vue2

  <template>
    <h2>Father</h2>
    <Child>
      这些文字将显示在组件默认插槽内
      <template slot="footer">
        这里的文字会显示在组件的具名插槽内
      </template>
    </Child>
  </template>
  

• vue3 废弃slot

  <template>
    <h2>Father</h2>
    <Child>
      这些文字将显示在组件默认插槽内
      <template v-slot:footer>
        这里的文字会显示在组件的具名插槽内
      </template>
    </Child>
  </template>
  

  <template>
    <h2>Child</h2>
    <div>默认插槽：
        <slot />
    </div>
    <div>具名插槽：
        <slot name="footer" />
    </div>
  </template>
  

作用域插槽 （带数据的插槽）

• 父组件 绑定子组件的数据
• slot-scope vue3弃用
• vue2
  • 父组件获取子组件值
    • 父组件 ==slot-scope==
    • 子组件 v-bind传值

  <template>
    <div class="father">
      <h3>这里是父组件</h3>
      <child>
        <template slot-scope="demo2">
          <div>
            <span>{{demo2.name1}}</span>
          </div>
        </template>
    </div>
  </template>

  <template>
      <div>
          <h2>Child</h2>
          <div><slot  :name1="name1" /></div>   
      </div>
  </template>
  <script>
  export default {
      data(){
          return{
              name1:'wy'
          }
      }
  }
  </script>

• vue3

  • 父组件获取子组件值
    • 父组件 ==v-slot自定义命名==
    • 子组件 v-bind传值

  <template>
      <div>
          <h2>Father</h2>
          <Child>
              <template v-slot:demo2="people">
                  <p>获取子组件data里的值: </p>
                  <p>可以直接获取父组件data值：</p>
              </template>
          </Child>
      </div>
  </template>
  <script>
  import Child from './Child'
  export default {
      components:{Child},
      data(){
          return{
              age:24
          }
      }
  }
  </script>
  

  <template>
      <div>
          <h2>Child</h2>
          <div><slot name= "demo2" :name1="name1" /></div>   
      </div>
  </template>
  <script>
  export default {
      data(){
          return{
              name1:'wy'
          }
      }
  }
  </script>