Vue组件公用方法提取mixin实现

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

<template>
    <div>
        <div>组件</div>
        <button @click="showName">弹出姓名</button>
    </div>
</template>

<script>

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

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')