Vue学习笔记：插槽Slot

Slot

之前使用props等方式实现组件间数据传递，除了这种方式，还可以使用slot元素实现传递模板片段。

以以下代码为例：

App.vue

<template>
    <conA>
        <template v-slot:first>
            <div>1111</div>
        </template>
        <template #second>
            <div>2222</div>
        </template>
        <div>未定义</div>
    </conA>
</template>
<script>
import ConA from './ConA.vue'
export default{
    components:{
        ConA
    }
}
</script>

ConA.vue

<template>
    <slot name="first"></slot>
    <slot></slot>
    <slot name="second"></slot>

</template>

在这两段代码中 App中引入了ConA组件，使用Slot插槽导入写入的template片段。

具名插槽

在Slot中可以用v-slot命令来定义， 一个名字，可以简写为#

相应的slot标签有name属性，与v-slot相对应。

作用域插槽

某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。要做到这一点，我们需要一种方法来让子组件在渲染时将一部分数据提供给插槽。 可以像对组件传递 props 那样，向一个插槽的出口上传递 attributes：

示例代码如下

在子组件中通过axios获取数据，并将数据向上传递给父组件

DataCon.vue

<template>
    <div>
        <slot :mydata="mydata" />
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            mydata: 1323,
            mytext: 'ttttt'
        }
    },
    mounted() {
        axios.get('/data.json').then(res => {
            this.mydata = res.data.hot
        })
    }
}
</script>

父组件接受数据并展示

<template>
    <DataCon v-slot="slotProps">
        {{ slotProps.mytext }}
        <ul>
            <li v-for="d in slotProps.mydata" :key="d.id">
            {{ d.nm }}</li>
        </ul>
    </DataCon>
</template>
<script>
import DataCon from './DataCon.vue'
export default{
    components:{DataCon},
    
}
</script>