Vue插槽

  插槽是指在HTML中自定义组件内容的技术

匿名插槽

在HTML组件标签中插入新元素，其没有Name属性slot属性的为匿名插槽。 有一个缺点：在页面上所有的匿名插槽都会在同一slot标签位置依次插入，无法实现自定义位置。

自定义插槽

在插入的标签中添加 slot属性：值为自定义NAME，在组件内为Slot插槽添加Name其值与插入的Slot属性值对应即可确定摆放的位置。

作用域插槽

在槽内发送通过 ：KEY='VALUE'的方式发送属性。
在插通过slot-scope='scope'属性接受。scope槽内传过来的数据其为一个对象

作用域插槽指：在外使用组件为其添加插槽，插槽的内容引用组件内的数据

插槽传值

slot-scope
vue2.5及之前的版本使用 slot-scope 属性来接收插槽传过来的，属性值为任意名对象，传过来的值存在对象中。

v-slot
vue2.6及之后的版本使用 v-slot 取代了 slot-scope，想要插入插槽内容需用template标签包裹，具名插槽用法：使用 v-slot:插槽name值="scope" 取代name="s2"，匿名插槽用法：v-slot="scope"，scope 值为对象 可以接收插槽传的值。

// App.vue
<template>
  <div id="app">
    <h1>App</h1>
    <DemoOne>
      <h2 slot="s1" slot-scope="scope">插槽s1--{{scope.msgv}}</h2>
      <!-- vue2.6之后的版本 v-slot取代了 slot-scope
           想要插入插槽内容需用template标签包裹
           使用 v-slot:插槽name值="scope" 取代name="s2"
           scope 值为对象 可以接收插槽传的值  -->
      <!-- v-slot具名插槽写法 -->
      <template v-slot:s2="scope">
        <h2>插槽s2--{{scope.str}}</h2>
      </template>
      <!-- v-slot匿名插槽写法 -->
      <template v-slot="scope">
        <h2>匿名插槽--{{scope.str}}</h2>
      </template>
    </DemoOne>
    
    <!-- 点击a标签可以在控制台打印插槽传过来的对象信息 -->
    <demo-two>
      <template slot-scope="scope">
        <a href="javascript:;" @click="handler(scope.row)">查看</a>
      </template>
    </demo-two>
  </div>
</template>

<script>
import DemoOne from '@/components/DemoOne.vue'
import DemoTwo from '@/components/DemoTwo.vue'

export default {
  name:'App',
  components:{
    DemoOne,
    DemoTwo
    
  },
  methods:{
    handler(row){
      console.log(row);
    },
  }
}
</script>
复制代码

// DemoOne.vue
<template>
  <div>
      <hr>
      <slot name="s1" :msgv="msg"></slot>
      <h1>DemoOne</h1>
      <slot name="s2" :str="str"></slot>
      <slot :str="str2"></slot>
  </div>
</template>

<script>
export default {
    name:'DemoOne',
    data(){
        return {
            msg:'插槽s1的值',
            str:'插槽s2的值',
            str2:'匿名插槽的值'
        }
    }
}
</script>

// DemoTwo.vue
<template>
  <div>
      <hr>
      <h1>DemoTwo</h1>
      <ul>
          <li v-for="(v,i) in list" :key="i">
              {{v.name}}--{{v.age}}
              <slot :row="v"></slot>
          </li>
      </ul>
  </div>
</template>

<script>
export default {
    name:'DemoTwo',
    data(){
        return {
            list:[{
                name:'张三',
                age:20
            },
            {
                name:'李四',
                age:30
            },{
                name:'王五',
                age:35
            }]
        }
    }
}