slot 是什么？

先导语

slot是vue中比较常用的特性，今天来总结下slot的常用用法。

slot的基本使用

slot的基本用法是用来向子组件中插入一段内容。 父组件：

<template>
    <div>
      <slotDemo :url="url">
          {{str}}
      </slotDemo>
    </div>
</template>

<script>
import slotDemo from './SlotDemo.vue'
export default {
    components:{
      slotDemo
    },
    data() {
        return {
            url:'www.baidu.com',
            str:'测试slot的基本用法'
        }
    },
    methods:{

    }
}
</script>

子组件：

<template>
    <a :href="url">
        <slot>
            默认内容，即父组件没设置内容时，这里显示
        </slot>
    </a>
</template>

<script>
export default {
    name:'slotDemo',
    props: ['url'],
    data() {
        return {}
    }
}
</script>

结果：

作用域插槽

作用域插槽，主要是用于当父组件中希望获取到子组件中的数据时。父组件中用v-slot指令
父组件代码：

<template>
    <div>
      <socpedSlotDemo :url="url" v-slot="scopedSlotData">
          {{scopedSlotData.slotData.title}}
      </socpedSlotDemo>
    </div>
</template>

<script>
import socpedSlotDemo from './ScopedSlotDemo'
export default {
    components:{
      socpedSlotDemo
    },
    data() {
        return {
            url:'www.baidu.com',
            str:'测试slot的基本用法'
        }
    },
    methods:{

    }
}
</script>

子组件代码：把需要数据绑定在slot上

<template>
    <a :href="url">
        <slot :slotData="website">
            {{website.subTitle}} <!-- 默认值显示 subTitle ，即父组件不传内容时 -->
        </slot>
    </a>
</template>

<script>
export default {
    props: ['url'],
    data() {
        return {
            website: {
                url: 'http://wangEditor.com/',
                title: 'wangEditor',
                subTitle: '轻量级富文本编辑器'
            }
        }
    }
}
</script>

结果：

具名插槽

具名插槽很简单，就是当子组件中有多个slot时，需要给每个slot指定一个名字。
注意点：没有指定名字的slot就是默认的slot
父组件代码：

<template>
    <div>
      <SlotDemo :url="url">
        <!-- 具名插槽和作用域插槽一起使用的写法-->
        <template  v-slot:test1="soltData">
          <p>{{soltData.slotData.title}}</p>
        </template>

        <!-- 普通写法-->
        <template  v-slot:test2>
          <p>测试内容2</p>
        </template>
        <template  v-slot:test3>
          <p>测试内容3</p>
        </template>
        
        <!--没有指定名字的内容放在默认slot中去-->
        <p>测试内容4</p>
      </SlotDemo>
    </div>
</template>

<script>
import SlotDemo from './SlotDemo'
export default {
    components:{
      SlotDemo
    },
    data() {
        return {
            url:'www.baidu.com',
            str:'测试slot的基本用法'
        }
    },
    methods:{

    }
}
</script>

子组件代码：

<template>
  <div>
    <a :href="url" >
      <slot name="test1" :slotData="website">
        默认内容，即父组件没设置内容时，这里显示
      </slot>
    </a>
    <div>
      <slot name="test2">
        测试内容2测试内容2测试内容2测试内容2测试内容2
      </slot>
    </div>
    <div>
      <slot name="test3">
        测试内容3测试内容3测试内容3测试内容3测试内容3测试内容3
      </slot>
    </div>
    <div>
       //默认slot
      <slot>
        测试内容4测试内容4测试内容4测试内容4测试内容4测试内容4
      </slot>
    </div>
  </div>

</template>

<script>
export default {
    name:'slotDemo',
    props: ['url'],
    data() {
        return {
          website: {
            url: 'http://wangEditor.com/',
            title: 'wangEditor',
            subTitle: '轻量级富文本编辑器'
          }
        }
    }
}
</script>

结果：

结束语

今天主要总结了slot的常用的内容。那么下次见，好好学习，天天向上！