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

最新推荐文章于 2024-08-07 19:15:08 发布

努力的旋转菠萝

最新推荐文章于 2024-08-07 19:15:08 发布

阅读量704

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_48108860/article/details/124104828

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

插槽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>
                </div>
            </div>
        `

作用域插槽

将子组件数据在子组件标签中显示出来，scope是一个对象

         <my-com>
            <!-- 作用域插槽scope是一个对象,显示的是插槽中传递的数据-->
            <template v-slot:default="scope">
                <div>
                    123
                    {{scope.subMsg}}
                </div>
            </template>
        </my-com>

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

混入mixin

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

混入方式

不建议使用全局注册混入对象，一旦使用全局混入，它将会影响以后创建的每一个vue实例。

全局混入

 Vue.mixin(mixin);

局部混入

        let vm = new Vue({
            el: '#app',
            // 2、局部混入
            mixins:[mixin],
            data: {
                
            },
            methods: {
                
            }
        });

混入规则

当组件和混入对象有同名选项时，这些选项会以恰当的方式合并

data：会进行合并，发生冲突时，保留组件的数据

methods、computed：methods会合并，如果对象的键名发生冲突，则保留组件的键值对

生命周期钩子函数：同名的钩子函数会被合并为一个数组，依次被调用且混入对象的先被调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <!-- 混入对象 mixin  -->
    <div id="app">

    </div>
    <script>
        // 1、创建一个混入对象
        let mixin = {
            data() {
                return {
                    // 混入的数据
                    mixinData: '我是混入的数据',
                    obj: { name: '张三', age: 12 }
                }
            },
            created() {
                console.log('我是混入的生命周期created')
            },
            methods: {
                mixinMethod() {
                    console.log('我是混入的方法')
                },
                test() {
                    console.log('我是混入的方法test')
                }
            }
        };
        let vm = new Vue({
            el: '#app',
            // 2、局部混入
            mixins:[mixin],
            data: {
                msg: '我是的vue的数据',
                obj: { name: "李四", gender: '男' }
            },
            created() {
                console.log('我是vue的生命周期created');
            },
            methods: {
                test() {
                    console.log('我是vue的方法test')
                }
            }
        });
    </script>
</body>

</html>

过滤器

过滤器可以用在两个地方：

1、双花括号插值

2、v-bind表达式

过滤器应该被添加在 JavaScript 表达式的尾部，由“ | “符号指示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器</title>
    <!-- 引入moment第三方库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 2、使用过滤器 -->
        <!-- 第一种：双花括号{{}} -->
        <!-- 第二种：在v-bind属性中使用 -->
        {{new Date() | fmtDate}}
        <div :title="new Date() | fmtDate">鼠标悬浮上去展示title</div>
    </div>
    <script>
        // 1、全局注册过滤器
        Vue.filter('fmtDate', function (date) {
            return moment(date).format('YYYY-MM-DD :HH:mm:ss')
        })
        new Vue({
            el: '#app',
            data: {
                msg: 'hello'
            },
            methods: {

            }
        })
    </script>
</body>
</html>