Vue组件公用方法如何提取mixin

共计 1325 个字符，预计需要花费 4 分钟才能阅读完成。

多个组件共用一个方法时可以用 mixin 抽取到一个 js 文件中，作为共用方法

export const common = {
     
    // 组件共用属性 ----------------------------------
    data() {
        return {age: 18                    // 设置一个共用属性}
    },
    // ---------------------------------------------
     
    // 组件共用方法 ---------------------------------------------
    methods: {showName() {alert(this.name)          // 弹出组件中 name 属性的共用方法
        }
    },
    // --------------------------------------------------------
     
    // 组件挂载时的共用方法 ----------------------
    mounted() {console.log('初始化方法')    // 挂载时调用
    },
    // ----------------------------------------
     
}

 组件
        弹出姓名
    

 

 
    // 引入 js 文件中的方法对象 --------------------
    import {common,} from '../pub_js/common.js'
    // ----------------------------------------
     
    export default {
        name: 'Student',
        data() {
            return {name: '张三'}
        },
         
        // 调用 mixin 将组件 js 与共用 js 合并 ---
        mixins: [common,],
        // --------------------------------
         
    }

1.data 中的属性合并后，如果有命名冲突的情况，以组件中的属性为主，【组件属性覆盖共用 js 中的属性】

2.methods 中的方法合并后，如果有命名冲突的情况，以组件中的方法为主，【组件方法覆盖共用 js 中的方法】

3.mounted 等生命周期方法合并后，会先调用共用 js 中的的生命周期函数，再调用组件中的生命周期函数，【不会进行覆盖】

4. 如果是全局共用的方法，可以直挂载到 main.js 中↓

import Vue from 'vue'
import App from './App.vue'
 
Vue.config.productionTip = false
 
// 挂载全局共用方法 -----------------------
import {common,} from 'pub_js/common.js'
Vue.mixin(common)
// --------------------------------------
 
new Vue({render: h => h(App),
}).$mount('#app')

阿里云 2 核 2G 服务器 3M 带宽 61 元 1 年，有高配

腾讯云新客低至 82 元 / 年，老客户 99 元 / 年

代金券：在阿里云专用满减优惠券