Vue組件公用方法提取mixin的示例分析

這篇文章給大家分享的是有關Vue組件公用方法提取mixin的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

一.應用場景

多個組件共用一個方法時可以用 mixin 抽取到一個js文件中，作為共用方法

二.實現方法

1.提取js共用方法文件

export const common = {
    
    // 組件共用屬性 ----------------------------------
    data() {
        return {
            age: 18                    // 設置一個共用屬性
        }
    },
    // ---------------------------------------------
    
    // 組件共用方法 ---------------------------------------------
    methods: {
        showName() {
            alert(this.name)          // 彈出組件中name屬性的共用方法
        }
    },
    // --------------------------------------------------------
    
    // 組件掛載時的共用方法 ----------------------
    mounted() {
        console.log('初始化方法')    // 掛載時調用
    },
    // ----------------------------------------
    
}

2.引入

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

三.注意事項

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

感謝各位的閱讀！關于“Vue組件公用方法提取mixin的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！