快捷導(dǎo)航

Vue混入與插件的使用介紹

更新時間：2022年09月08日 11:28:02 作者：月光曬了很涼快

這篇文章主要介紹了Vue混入與插件的使用，mixins（混入），官方的描述是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式，mixins是一個js對象，它可以包含我們組件中script項中的任意功能選項，如data、components、methods 、created、computed等等

1. 混入

概述：

混入(mixins)是一種分發(fā)Vue組件中可復(fù)用功能的非常靈活的方式。混入對象可以包含任意組件選項。當(dāng)組件使用混入對象時，所有混入對象的選項將被混入該組件本身的選項。

簡單來說，混入用于公共代碼復(fù)用。

混入分為：全局和局部。

混入的執(zhí)行順序：

<div id="app">
    <h3>{{name}}</h3>
    <hr>
    <h3>{{showName}}</h3>
    <hr>
    <div>{{run()}}</div>
</div>
<script>
    // 混入：用于公共代碼復(fù)用
    // 方式  全局  局部
    Vue.mixin({
        // data混入
        data() {
            return {
                name: '張三 -- 全局'
            }
        },
        // 計算屬性混入
        computed: {
            showName() {
                return 'abc -- 全局'
            }
        },
        methods: {
            run() {
                return 'run -- 全局'
            }
        },
        // 生命周期方法混入
        created() {
            console.log('created -- 全局');
        }
    })
    // 局部混入
    const mix = {
        data() {
            return {
                name: '張三 -- 局部'
            }
        },
        computed: {
            showName() {
                return 'abc -- 局部'
            }
        },
        methods: {
            run() {
                return 'run -- 局部'
            }
        },
        created() {
            console.log('created -- 局部');
        }
    }
    const vm = new Vue({
        el: '#app',
        data: {
            // name: '張三 -- 實例'
        },
        // 局部混入調(diào)用,可以調(diào)用 n 個
        mixins: [mix],
        methods: {
            run() {
                return 'run -- 實例'
            }
        },
        created() {
            console.log('created -- 實例');
        }
    })
</script>

注意：

混入的配置，可以把幾乎所有new Vue配置中的所有配置都能混入，但是el配置它不可以混入
data配置，在混入方式中，只能寫函數(shù)的方式，且函數(shù)一定要返回一個對象，混入可能被調(diào)用多次，如果直接是對象的話，就會有污染(調(diào)用多次,引用地址卻不變,實例之間調(diào)用時不會互相影響)
data混入的優(yōu)先級(對象屬性) 組件(實例) > 局部 > 全局 => 只會調(diào)用一個
生命周期方法，執(zhí)行順序全局 -> 局部 --> 組件(實例) 依次執(zhí)行
方法依次執(zhí)行,屬性對應(yīng)的配置只執(zhí)行一次,data是例外

2. 插件

概述：

在vue中提供插件機制，可以通過它的要求來完成插件的封裝，運用到項目中

語法：

Vue.use(函數(shù)|類|對象,[可選參數(shù)])

// 函數(shù)
// 函數(shù)名稱 plugin 可以更換
function plugin(Vue類,options可選參數(shù)){}
// 類
class Plugin {
	// 必須是靜態(tài)方法，且名稱必須為install
	static install(Vue類,options可選參數(shù)){}
}
// 調(diào)用靜態(tài)屬性：Plugin.install(Vue類,options可選參數(shù))
// 對象
const obj = {
	// 屬性名稱必須為 install
	install(Vue類,options可選參數(shù)){}
}

案例：

<div id="app">
    <h3 v-red>{{title}}</h3>
</div>
<script>
    // 它是就一個模塊
    function plugin(Vue, options) {
        console.log(options);
        // 這是一個指令
        Vue.directive('red', el => {
            el.style.cssText = 'color:red'
        })
        // 這是混入
        Vue.mixin({
            data() {
                return {
                    title: `() => console.log('run');`
                }
            },
            // 這是生命周期方法
            created() {
                this.title = options.title
                console.log('混入了');
            }
        })
        // 靜態(tài)屬性
        Vue.run = () => console.log('run');
        // 添加成員屬性
        Vue.prototype.play = () => console.log('play');
    }
    // 插入插件,可以插入?yún)?shù)
    Vue.use(plugin, { title: 'abc' })
    const vm = new Vue({
        el: '#app',
        data: {
        },
        created() {
            Vue.run()
            this.play()
        }
    })
</script>

插件封裝成類：

<div id="app">
    <h3 v-red>{{title}}</h3>
</div>
<script>
    class Plugin {
        // 它是就一個模塊
        static install(Vue, options) {
            console.log(options);
            Vue.directive('red', el => {
                el.style.cssText = 'color:red'
            })
            Vue.mixin({
                data() {
                    return {
                        title: `() => console.log('run');`
                    }
                },
                created() {
                    this.title = options.title
                    console.log('混入了');
                }
            })
            // 添加成員屬性
            Vue.prototype.run = () => console.log('run');
        }
    }
    // 插入插件
    Vue.use(Plugin, { title: 'abc' })
    const vm = new Vue({
        el: '#app',
        data: {
        },
        created() {
            this.run()
        }
    })
</script>

插件封裝成對象：

<div id="app">
    <h3 v-red>{{title}}</h3>
</div>
<script>
    const Plugin = {
        install(Vue, options) {
            console.log(options);
            Vue.directive('red', el => {
                el.style.cssText = 'color:red'
            })
            Vue.mixin({
                data() {
                    return {
                        title: `() => console.log('run');`
                    }
                },
                created() {
                    this.title = options.title
                    console.log('混入了');
                }
            })
            // 添加成員屬性
            Vue.prototype.run = () => console.log('run');
        }
    }
    // 插入插件
    Vue.use(Plugin, { title: 'abc' })
    const vm = new Vue({
        el: '#app',
        data: {
        },
        created() {
            this.run()
        }
    })
</script>

到此這篇關(guān)于Vue混入與插件的使用介紹的文章就介紹到這了,更多相關(guān)Vue混入與插件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: