Vue之mixins理解与应用

2022-09-11 23:30:43 阅读：159 来源： 互联网

标签：Vue console log mixins 理解 mixin 组件 mounted

原文地址：http://t.zoukankan.com/emilyzz-p-14202639.html

1、什么是mixins

　　vue提供的一种混合机制，能够更好的实现组件功能复用，混合对象（mixins）可以包含任意组件选项（data、created、mounted、methods、filters等），组件引入后相关选项会进行合并，相当于引入后，父组件各属性进行扩充；

2、方法覆盖

　　在引入mixins的同时，组件中重复定义，minxins中的属性方法会被覆盖

3、应用

　　mixin.js

const mixin = {
    data() {
        return {

　　　　　　　　test: 'mixins变量覆盖组件内变量',

        }
    },
    created() {
        console.log('created: from mixins');
    },
    mounted() {
        console.log('mounted: from mixins');
    }
}
export default mixin

　　组件引入mixin.js

import mixin from '@/mixins/mixin';

　export default { 　　data(){ 　　　　return { 　　　　　　test: '组件变量覆盖mixins变量' 　　　　} 　　}, 　　mixins: [mixin],　　　created() { 　　　　console.log(this.test) 　　　　console.log('created: from 当前组件') 　　}, 　　mounted() { 　　　　console.log('mounted: from 当前组件') 　　}, 　}

　　合并后打印情况

标签：Vue,console,log,mixins,理解,mixin,组件,mounted
来源： https://www.cnblogs.com/eyesfree/p/16685129.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue之mixins理解与应用