Vue如何使用混合Mixins和插件開發(fā)詳解
官網(wǎng)：混合 (mixins) 是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式。混合對(duì)象可以包含任意組件選項(xiàng)。以組件使用混合對(duì)象時(shí)，所有混合對(duì)象的選項(xiàng)將被混入該組件本身的選項(xiàng)。
個(gè)人：混入就是用來對(duì)vue組件中的公共部分，包括數(shù)據(jù)對(duì)象、鉤子函數(shù)、方法等所有選項(xiàng)，進(jìn)行提取封裝，以達(dá)到代碼的復(fù)用，混合用處挺大的，然我們來看看實(shí)際用法。
基礎(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)先級(jí)
全局注冊(cè)
main.js中直接注冊(cè)
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)用，看看控制臺(tái)是否有打印結(jié)果，可以發(fā)現(xiàn)我們并未調(diào)用，就打印了兩次，按照大家常規(guī)考慮可能會(huì)想到執(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, // 添加一個(gè)狀態(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>
模塊化注冊(cè)
新建單獨(dú)的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注冊(cè)
Vue.use(myMixin);
new Vue({
doNotInit: true,
render: h => h(App),
}).$mount('#app')
// 在組件中調(diào)用
<script>
export default {
created(){
this.foo()
},
}
</script>
效果與main.js注冊(cè)方式一樣
開發(fā)插件
上面提到use，也講解一下use相關(guān)的知識(shí)，而且在開發(fā)中也常?？吹饺?code>Vue.use(VueRouter)，Vue.js 在插件開發(fā)過程中需要注意是有一個(gè)公開方法 install 。這個(gè)方法的第一個(gè)參數(shù)是 Vue 構(gòu)造器 , 第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)對(duì)象，
插件通常會(huì)為Vue添加全局功能。插件的范圍沒有限制——一般有下面幾種：
1、添加全局方法或者屬性，如: vue-element]
2、添加全局資源：指令/過濾器/過渡等，如 vue-touch
3、通過全局 mixin方法添加一些組件選項(xiàng)，如: vuex
4、添加 Vue 實(shí)例方法，通過把它們添加到 Vue.prototype 上實(shí)現(xiàn)。
5、一個(gè)庫，提供自己的 API，同時(shí)提供上面提到的一個(gè)或多個(gè)功能，如 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ī)定，第一個(gè)傳入Vue的實(shí)例，第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)對(duì)象，也就是可以傳遞參數(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"> 點(diǎn)擊開始加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：一個(gè)對(duì)象，包含以下屬性
- name：指令名，不包含v-前綴
- value：指令的綁定值，例如：上面例子中的值就是 red
- oldValue：指令綁定的前一個(gè)值，僅在 update 和componentUpdated 鉤子中可用。無論值是否改變都可用
- expression：字符串形式的指令表達(dá)式
arg：傳給指令的參數(shù)，可選。
modifiers：一個(gè)包含修飾符的對(duì)象
自定義指令有5個(gè)生命周期(也叫作鉤子函數(shù))分別是:
bind, inserted, update, componentUpdate, unbind
// 也就是在對(duì)應(yīng)上面的例子中的
bind 只調(diào)用一次，指令第一次綁定到元素時(shí)候調(diào)用，用這個(gè)鉤子可以定義一個(gè)綁定時(shí)執(zhí)行一次的初始化動(dòng)作。
inserted:被綁定的元素插入父節(jié)點(diǎn)的時(shí)候調(diào)用(父節(jié)點(diǎn)存在即可調(diào)用，不必存在document中)
update: 被綁定與元素所在模板更新時(shí)調(diào)用，而且無論綁定值是否有變化，通過比較更新前后的綁定值，忽略不必要的模板更新
componentUpdate :被綁定的元素所在模板完成一次更新更新周期的時(shí)候調(diào)用
unbind: 只調(diào)用一次，指令月元素解綁的時(shí)候調(diào)用圖片黃色框的地方，是在組件使用了v-hello指令后所初始化的數(shù)據(jù)，并且也打印了接受參數(shù)，在點(diǎn)擊解綁后，在點(diǎn)擊開始加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 會(huì)自動(dòng)阻止注冊(cè)相同插件多次，屆時(shí)只會(huì)注冊(cè)一次該插件
參考文章
web前端開發(fā)-混合
Vue.directive指令
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)元素拖動(dòng)并互換位置的實(shí)現(xiàn)代碼
在使用Vue的場(chǎng)景下,需要實(shí)現(xiàn)對(duì)元素進(jìn)行拖動(dòng)交換位置,接下來通過本文給大家介紹vue實(shí)現(xiàn)元素拖動(dòng)并互換位置的實(shí)現(xiàn)代碼,需要的朋友可以參考下2023-09-09
vue2.0 + ele的循環(huán)表單及驗(yàn)證字段方法
今天小編就為大家分享一篇vue2.0 + ele的循環(huán)表單及驗(yàn)證字段方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue組件文檔生成備注詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue實(shí)現(xiàn)預(yù)覽docx/xlsx/pdf等類型文件功能
這篇文章主要介紹了如何在Vue中實(shí)現(xiàn)docx/xlsx/pdf等類型文件預(yù)覽功能,在實(shí)現(xiàn)過程中，需要注意文件的格式和轉(zhuǎn)換方式，以及插件和組件的使用方法和注意事項(xiàng)，需要的朋友可以參考下2023-05-05
vue使用element-ui的el-date-picker設(shè)置樣式無效的解決
本文主要介紹了vue使用element-ui的el-date-picker設(shè)置樣式無效的解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
Vue中用JSON實(shí)現(xiàn)刷新界面不影響倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了Vue中用JSON實(shí)現(xiàn)刷新界面不影響倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
解決在vue的mounted中獲取對(duì)象為null問題
這篇文章主要介紹了解決在vue的mounted中獲取對(duì)象為null問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue實(shí)現(xiàn)修改圖片后實(shí)時(shí)更新
今天小編就為大家分享一篇vue實(shí)現(xiàn)修改圖片后實(shí)時(shí)更新，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
springboot?vue測(cè)試平臺(tái)前端項(xiàng)目查詢新增功能
這篇文章主要為大家介紹了springboot+vue測(cè)試平臺(tái)前端項(xiàng)目實(shí)現(xiàn)查詢新增功能，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
Vue3中同時(shí)定義多個(gè)插槽的實(shí)現(xiàn)示例
本文主要介紹了Vue3中同時(shí)定義多個(gè)插槽的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12