插槽

在Vue3中，用template标签包裹要填充的内容，v-slot属性也需定义在template标签上，只有一种例外情况，就是默认插槽
v-slot:的语法糖是#，但后面必须有插槽名，例如v-slot:default 等价于 #default
插槽有三种

默认插槽

//父组件 (Child外层有templat>div标签，此处省略，方便观看)

<Child>
    <template v-slot:default>
        <p></p>
    </template>
</Child>

//也可以是这样，属于例外情况
//父组件

<Child v-slot:default>
    <p></p>
</Child>

具名插槽

//父组件

<Child>
    <template v-slot:xxx>   //绑定名称
        <p></p>
    </template>
    <template v-slot:[动态插槽名]>   //动态插槽名，即通过data的属性值来控制插槽名，以动态更新
        <p></p>
    </template>
</Child>

//子组件

<template>
    <div>
        <slot name=xxx></slot>
        <slot name=xxx></slot>
    </div>
</template>

作用域插槽

作用域插槽的作用即延展子模板中数据的作用域，使得在父级模板中也可使用子模板中的数据
//父组件

<Child>
    <template v-slot:num="slotProps">
        <p>{{slotProps.value}}</p>  //访问子组件中“num”插槽的value属性值
    </template>
    
    <template v-slot:default="slotProps">
        <p>{{slotProps.price}}</p>  //访问子组件中对应默认插槽的price属性值
    </template>
    
    <template v-slot:name="{uname: myname}">
        <p>{{myname}}</p>   //访问子组件中对应“name”插槽的uname属性值，采用解构赋值的方式
    </template>
</Child>

//子组件

<template>
    <div>
        <slot name="num" :value="value"></slot>
        <slot :price="price"></slot>
        <slot name="name" :uname="uname"></slot>
    </div>
</template>
<script>
export default {
    setup() {
        const value = '99999',
                  price = '20.00',
                  uname= 'sr'
        return {
            value,
            price,
            uname
        }
    }
}
</script>

插槽的实现原理(/过程)：

当子组件vm实例化时，获取到父组件传入的slot标签的内容，存放在vm.slot.default，具名插槽为vm.slot中的内容进行替换，此时可以为插槽传递数据，若存在数据，
则可称该插槽为作用域插槽

参考：

Vue入门之slot属性 - 简书 (jianshu.com)

「2021」高频前端面试题汇总之Vue篇 （上） (juejin.cn)

vue2到vue3中插槽slot变化详解---从slot，slot-scope到v-slot的变化_marendu的博客-CSDN博客

Attribute 继承

通过将 inheritAttrs 选项设置为 false，你可以访问组件的 $attrs property，该 property 包括组件 props 和 emits property 中未包含的所有属性 (例如，class、style、v-on 监听器等)

父组件

<template>
    <date-picker data-status="12345"></date-picker>
</template>

<script>
import DatePicker from "./DatePicker"
export default {
    components: {
        DatePicker
    }
}
</script>

子组件

<template>
<div>
// v-bind="$attrs" 获取父组件上所有可继承的值
    <input type="date" v-bind="$attrs" />
</div>
</template>

<script>
export default {
    inheritAttrs: false, //禁用默认继承
    data() {
        return {

        }
    }
}
</script>

渲染完成显示结果

<div class="date-picker">
  <input type="datetime" data-status="12345" />
</div>