Vue如何使用混合Mixins和插件開發(fā)詳解
官網(wǎng)：混合 (mixins) 是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式?；旌蠈ο罂梢园我饨M件選項。以組件使用混合對象時，所有混合對象的選項將被混入該組件本身的選項。
個人：混入就是用來對vue組件中的公共部分，包括數(shù)據(jù)對象、鉤子函數(shù)、方法等所有選項，進(jìn)行提取封裝，以達(dá)到代碼的復(fù)用，混合用處挺大的，然我們來看看實際用法。
基礎(chǔ)用法
// 這是在main.js根文件中使用,在組中使用也是一樣
import Vue from 'vue';
var mixin = {
data() {
return {
name: 'www.vipbic.com',
author: '羊先生'
}
},
created: function() {
console.log('Website：' + this.name)
},
methods: {
foo: function() {
console.log('作者：' + this.author)
},
conflicting: function() {
console.log('from mixin')
}
}
}
new Vue({
mixins: [mixin],
render: h => h(App),
created() {
let option = this.$options.doNotInit
console.log('option：', );
this.foo()
}
}).$mount('#app')
// 在組建中使用
<template><div></div></template>
<script>
var mixin = {
data() {
return {
name: 'www.vipbic.com',
author: '羊先生'
}
},
created: function() {
console.log('Website：' + this.name)
},
methods: {
foo: function() {
console.log('作者：' + this.author)
}
}
}
export default {
mixins: [mixin],
created(){
this.foo()
}
}
</script>
效果如下，都一樣，可以看出混合mixins中的created高于組件created執(zhí)行優(yōu)先級
全局注冊
main.js中直接注冊
import Vue from 'vue';
var mixin = {
data() {
return {
name: 'www.vipbic.com',
author: '羊先生'
}
},
created: function() {
console.log('Website：' + this.name)
},
methods: {
foo: function() {
console.log('作者：' + this.author)
}
}
}
Vue.mixin(mixin)
new Vue({
render: h => h(App)
}).$mount('#app')
效果如下，我們先不調(diào)用，看看控制臺是否有打印結(jié)果，可以發(fā)現(xiàn)我們并未調(diào)用，就打印了兩次，按照大家常規(guī)考慮可能會想到執(zhí)行一次，是正常的，即初始化一次，但卻執(zhí)行了兩次
如何解決執(zhí)行兩次
我在網(wǎng)上看到都是這么做的，都說是從官網(wǎng)上看到的，但是我在官網(wǎng)上并沒有看到，不過的確能解決問題
var mixin = {
data() {
return {
name: 'www.vipbic.com',
author: '羊先生'
}
},
created: function() {
let option = this.$options.doNotInit;
console.log(option) // 第一次執(zhí)行 true 第二次為 undefined
if (!option) {
// 可以放置一些你的邏輯，比如一開始就要調(diào)用的方法
console.log('Website：' + this.name)
}
},
methods: {
foo: function() {
console.log('作者：' + this.author)
},
}
}
Vue.mixin(mixin);
new Vue({
doNotInit: true, // 添加一個狀態(tài)
render: h => h(App),
}).$mount('#app')
效果如下
如何調(diào)用
剛上面解釋了如何解決調(diào)用兩次的問題
// main.js
import Vue from 'vue';
var mixin = {
data() {
return {
name: 'www.vipbic.com',
author: '羊先生'
}
},
created: function() {
let option = this.$options.doNotInit;
if (!option) {
console.log('Website：' + this.name)
}
},
methods: {
foo: function() {
console.log('作者：' + this.author)
},
}
}
Vue.mixin(mixin);
new Vue({
doNotInit: true,
render: h => h(App),
}).$mount('#app')
// 在組件中調(diào)用
<script>
export default {
created(){
this.foo()
},
}
</script>
模塊化注冊
新建單獨的mixin.js文件
import Vue from 'vue';
var mixin = {
data() {
return {
name: 'www.vipbic.com',
author: '羊先生'
}
},
created: function() {
let option = this.$options.doNotInit;
if (!option) {
console.log('Website：' + this.name)
}
},
methods: {
foo: function() {
console.log('作者：' + this.author)
},
conflicting: function() {
console.log('from mixin')
}
}
}
export default {
install(Vue) {
Vue.mixin(mixin)
}
}
// 在main.js通過use注冊
Vue.use(myMixin);
new Vue({
doNotInit: true,
render: h => h(App),
}).$mount('#app')
// 在組件中調(diào)用
<script>
export default {
created(){
this.foo()
},
}
</script>
效果與main.js注冊方式一樣
開發(fā)插件
上面提到use，也講解一下use相關(guān)的知識，而且在開發(fā)中也常?？吹饺?code>Vue.use(VueRouter)，Vue.js 在插件開發(fā)過程中需要注意是有一個公開方法 install 。這個方法的第一個參數(shù)是 Vue 構(gòu)造器 , 第二個參數(shù)是一個可選的選項對象，
插件通常會為Vue添加全局功能。插件的范圍沒有限制——一般有下面幾種：
1、添加全局方法或者屬性，如: vue-element]
2、添加全局資源：指令/過濾器/過渡等，如 vue-touch
3、通過全局 mixin方法添加一些組件選項，如: vuex
4、添加 Vue 實例方法，通過把它們添加到 Vue.prototype 上實現(xiàn)。
5、一個庫，提供自己的 API，同時提供上面提到的一個或多個功能，如 vue-router
let MyPlugin = {}
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或?qū)傩?
Vue.prototype.$myMethod = function (options) {
// 邏輯...
}
// 2. 添加全局資源指令
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 邏輯...
}
})
// 3. 注入組件,也就上面提到的混入,vue非常靈活就看你如何去挖掘它
Vue.mixin({
created: function () {
// 邏輯...
}
})
}
添加全局方法或?qū)傩?/strong>
import Vue from 'vue';
//根據(jù)install函數(shù)規(guī)定，第一個傳入Vue的實例，第二個參數(shù)是一個可選的選項對象，也就是可以傳遞參數(shù)
MyPlugin.install = function(Vue, options) {
console.log(options) // 打印參數(shù)
Vue.prototype.myName = options.name
Vue.prototype.myAuthor = function() {
return options.author
}
}
Vue.use(MyPlugin, {
name: 'www.vipbic.com' // 傳遞參數(shù)
author: '羊先生'
});
new Vue({
render: h => h(App),
}).$mount('#app')
在組件中調(diào)用
<script>
export default {
created(){
console.log(this.myName)
console.log(this.myAuthor())
},
}
</script>
效果如下
添加全局資源
// 通過vue指令的方式添加 指令可以全局添加還可以在組件中添加
import Vue from 'vue';
let MyPlugin = {}
MyPlugin.install = function(Vue, options) {
Vue.directive("hello", {
bind: function(el, bingind, vnode) {
console.log(options)
el.style["color"] = bingind.value;
console.log("1-bind");
},
inserted: function() {
console.log("2-insert");
},
update: function() {
console.log("3-update");
},
componentUpdated: function() {
console.log('4 - componentUpdated');
},
unbind: function() {
console.log('5 - unbind');
}
})
}
// 傳遞參數(shù)
Vue.use(MyPlugin, {
name: 'www.vipbic.com',
author: '羊先生'
});
new Vue({
render: h => h(App),
}).$mount('#app')
在組中使用
<template>
<div>
<span v-hello="color3">{{message}}</span>
<button @click="add"> 點擊開始加1</button>
<button @click="jiebang">解綁</button>
</div>
</template>
<script>
export default {
data(){
return {
message:10,
color3:"red"
}
},
methods:{
add(){
this.message++;
},
jiebang(){
this.$destroy(); // 解綁
}
},
}
</script>
<style lang="less" scoped>
</style>
頁面效果
分析結(jié)果，在分析結(jié)果前，我們先來看一下Vue.directive的api,來自官網(wǎng)的解釋
el：指令所綁定的元素，可以用來直接操作DOM
binding：一個對象，包含以下屬性
- name：指令名，不包含v-前綴
- value：指令的綁定值，例如：上面例子中的值就是 red
- oldValue：指令綁定的前一個值，僅在 update 和componentUpdated 鉤子中可用。無論值是否改變都可用
- expression：字符串形式的指令表達(dá)式
arg：傳給指令的參數(shù)，可選。
modifiers：一個包含修飾符的對象
自定義指令有5個生命周期(也叫作鉤子函數(shù))分別是:
bind, inserted, update, componentUpdate, unbind
// 也就是在對應(yīng)上面的例子中的
bind 只調(diào)用一次，指令第一次綁定到元素時候調(diào)用，用這個鉤子可以定義一個綁定時執(zhí)行一次的初始化動作。
inserted:被綁定的元素插入父節(jié)點的時候調(diào)用(父節(jié)點存在即可調(diào)用，不必存在document中)
update: 被綁定與元素所在模板更新時調(diào)用，而且無論綁定值是否有變化，通過比較更新前后的綁定值，忽略不必要的模板更新
componentUpdate :被綁定的元素所在模板完成一次更新更新周期的時候調(diào)用
unbind: 只調(diào)用一次，指令月元素解綁的時候調(diào)用圖片黃色框的地方，是在組件使用了v-hello指令后所初始化的數(shù)據(jù)，并且也打印了接受參數(shù)，在點擊解綁后，在點擊開始加1則無效
注入組件
let MyPlugin = {}
MyPlugin.install = function(Vue, options) {
Vue.mixin({
data() {
return {
name: options.name
}
},
methods: {
getUser() {
return options.author
}
}
})
}
Vue.use(MyPlugin, {
name: 'www.vipbic.com',
author: '羊先生'
})
new Vue({
render: h => h(App),
}).$mount('#app')
在組件中使用
export default {
data(){
return {
}
},
created(){
//這里name和getUser來自全局注入的
console.log(this.name)
console.log(this.getUser())
}
}
效果
Vue.use 會自動阻止注冊相同插件多次，屆時只會注冊一次該插件
參考文章
web前端開發(fā)-混合
Vue.directive指令
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了使用v-memo緩存模板子樹提高應(yīng)用性能詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)天氣預(yù)報小應(yīng)用，查詢一些城市的天氣情況，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
Vue使用exceljs導(dǎo)出excel文件的詳細(xì)教程
這篇文章主要為大家詳細(xì)介紹了Vue如何使用exceljs導(dǎo)出excel文件的詳細(xì)教程,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
這篇文章主要給大家介紹了vue獲取DOM節(jié)點的常用方法,使用ref屬性,使用$el屬性,使用querySelector和querySelectorAll,使用$refs和querySelector,這幾種方法,需要的朋友可以參考下2023-10-10
@vue/cli4升級@vue/cli5?node.js?polyfills錯誤的解決方式
最近在升級vue/cli的具有了一些問題,解決問題的過程也花費了些時間,所以下面這篇文章主要給大家介紹了關(guān)于@vue/cli4升級@vue/cli5?node.js?polyfills錯誤的解決方式,需要的朋友可以參考下2022-09-09
今天小編就為大家分享一篇vue解決一個方法同時發(fā)送多個請求的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue.prototype和vue.use的區(qū)別和注意點小結(jié)
這篇文章主要介紹了vue.prototype和vue.use的區(qū)別和注意點小結(jié),本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
前端啟動出現(xiàn)報錯提示vue-cli-service?serve的原因及解決辦法
這篇文章主要給大家介紹了關(guān)于前端啟動出現(xiàn)報錯提示vue-cli-service?serve的原因及解決辦法,文中通過圖文以及實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue2.x對象單層劫持的原理實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了vue生命周期與鉤子函數(shù),結(jié)合簡單實例形式分析了vue.js生命周期及鉤子函數(shù)相關(guān)流程與實現(xiàn)技巧,需要的朋友可以參考下2019-03-03