Vue（插槽、混入、过滤器）

最新推荐文章于 2023-07-11 17:19:02 发布

努力的旋转菠萝

最新推荐文章于 2023-07-11 17:19:02 发布

阅读量661

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_48108860/article/details/124104828

版权

本文详细介绍了Vue中的插槽技术，包括默认插槽、具名插槽和作用域插槽的使用，以及如何通过混入mixin实现组件的复用和功能扩展。同时，还讲解了过滤器在双花括号插值和v-bind表达式中的应用，帮助开发者深入理解Vue的组件通信和数据处理。

摘要由CSDN通过智能技术生成

插槽slot

普通插槽，具名插槽，作用域插槽

插槽允许我们在调用子组件的时候为子组件传递模板。

<slot> 元素作为承载分发内容的出口。

父级模板里的所有内容都是在父级作用域中编译；子模板里的所有内容都是在子作用域中编译。

在插槽默认模板中，可以直接访问子组件的数据，可以通过props间接访问父组件的数据。

在插槽自定义模板中，可以直接访问父组件的数据，可以通过作用域插槽间接访问子组件的数据。

默认插槽、匿名插槽

如果子组件当中有内容,则显示子组件中的内容；如果子组件当中没有内容,则显示插槽中的内容。

不带 name 的 <slot> 出口会带有隐含的名字“default”

        <!-- 如果子组件当中有内容,则显示子组件中的内容 -->
        <my-com>hello world</my-com>
        <!-- 默认插槽,如果子组件当中没有内容,则显示插槽中的内容 -->
        <my-com></my-com>

        template: `
            <div>
                <button><slot name='default'>默认内容</slot></button>              
            </div>
        `

具名插槽

将组件中的内容显示到指定插槽中，用v-slot或#指定插槽填充的位置

        <my-com>           
            <!-- 指定插槽填充位置，自定义插槽模板 -->
            <!-- 具名插槽v-slot或#指定插槽填充的位置 -->
            <template v-slot:default>
                <div>123</div>
            </template>
            <template v-slot:slot1>
                <div>456</div>
            </template>
            <template #slot1>
                <div>789</div>
            </template>
        </my-com>

        template: `
            <div>
                <button><slot name='default' :subMsg='subMsg'>默认内容</slot></button>
                <div>
                    <slot name='slot1'></slot>