Vue的作用域插槽(slot)

父组件中向子组件的slot插入内容一般只能使用父组件本身的数据，如果想要在父组件中使用子组件中的数据作为内容插入子组件的slot该怎么办。

这个时候就要用到作用域插槽了。

procedure

1. 子组件写好slot标签，父组件写好v-slot。
2. 子组件slot标签绑定属性（属性名无所谓），属性值为子组件的data中的变量。
3. 父组件以#slotname="childvalue"的形式接收到子组件中的数据。
4. 父组件在v-slot标签内使用的方式向子组件slot中插入数据。

code

child.vue:

child.vue

<template>
    <slot name="default" :d="name">备用内容</slot>
</template>

<script>
    data() {
        return {
            name: 'Mason',
            age: 22
        }
    }
</script>

parent.vue:

parent.vue

<template>
    <child #default="childData">
        {{ childData.name }}
        {{ chileData.age }}
    </child>
</template>