【002】Vue混入的相关知识点

最新推荐文章于 2024-09-15 17:15:28 发布

小李USER

最新推荐文章于 2024-09-15 17:15:28 发布

阅读量79

点赞数

分类专栏：待整理文章标签： vue.js 前端

本文链接：https://blog.csdn.net/m0_59110131/article/details/128395643

版权

待整理专栏收录该内容

8 篇文章 0 订阅

订阅专栏

如果存在相同的属性名或者方法名在混入对象和自身组件中，优先以组件为准。

特例：声明周期函数重名的情况下，先以混入对象为主，在以自身组件为主。

<body>
    <div id="app">
        <sub-component></sub-component>
    </div>
    <template id="subComponent">
        <div>
            <h2>subComponent组件</h2>
            <p>组件内部定义的数据：{{age}}</p>
            <button type="button" @click="fn">fn</button>
            <button type="button" @click="myFn">myFn</button>
            <button type="button" @click="add">add</button>
        </div>
    </template>
    <script>
        // 定义混入对象,会自动合并
        let myMixin = {
            data() {
                return {
                    realName: '李四',
                    age: 18
                }
            },
            methods: {
                myFn() {
                    console.log('混入对象的Fn.....');
                },
                add() {
                    console.log("混入对象加法运算");
                }
            },
            mounted() {
                console.log('混入对象的生命周期配置项');
            }
        }
        var subComponent = {
            template: '#subComponent',
            data() {
                return {
                    username: '张三',
                    age: 25
                }
            },
            methods: {
                fn() {
                    console.log('组件自身定义的fn....');
                },
                add() {
                    console.log("组件自身加法运算");
                }
            },
            mounted() {
                console.log('组件自身的生命周期配置项');
            },
            mixins: [myMixin]
        }
        Vue.component('subComponent', subComponent)
        const vm = new Vue({
            el: '#app'
        })
    </script>
</body>