Vue元件公用方法提取mixin實現

2022-03-29 13:01:16

一.應用場景

多個元件共用一個方法時可以用 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實現的文章就介紹到這了,更多相關Vue元件提取內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

Vue元件公用方法提取mixin實現

目錄

一.應用場景

二.實現方法

1.提取js共用方法檔案

2.引入

三.注意事項

熱門文章