Vue如何使用混合Mixins和插件開發(fā)詳解
官網(wǎng)：混合 (mixins) 是一種分發(fā) Vue 組件中可復用功能的非常靈活的方式?；旌蠈ο罂梢园我饨M件選項。以組件使用混合對象時，所有混合對象的選項將被混入該組件本身的選項。
個人：混入就是用來對vue組件中的公共部分，包括數(shù)據(jù)對象、鉤子函數(shù)、方法等所有選項，進行提取封裝，以達到代碼的復用，混合用處挺大的，然我們來看看實際用法。
基礎用法
// 這是在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)用，看看控制臺是否有打印結果，可以發(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相關的知識，而且在開發(fā)中也常?？吹饺?code>Vue.use(VueRouter)，Vue.js 在插件開發(fā)過程中需要注意是有一個公開方法 install 。這個方法的第一個參數(shù)是 Vue 構造器 , 第二個參數(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. 添加全局方法或屬性
Vue.prototype.$myMethod = function (options) {
// 邏輯...
}
// 2. 添加全局資源指令
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 邏輯...
}
})
// 3. 注入組件,也就上面提到的混入,vue非常靈活就看你如何去挖掘它
Vue.mixin({
created: function () {
// 邏輯...
}
})
}
添加全局方法或屬性
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>
頁面效果
分析結果，在分析結果前，我們先來看一下Vue.directive的api,來自官網(wǎng)的解釋
el：指令所綁定的元素，可以用來直接操作DOM
binding：一個對象，包含以下屬性
- name：指令名，不包含v-前綴
- value：指令的綁定值，例如：上面例子中的值就是 red
- oldValue：指令綁定的前一個值，僅在 update 和componentUpdated 鉤子中可用。無論值是否改變都可用
- expression：字符串形式的指令表達式
arg：傳給指令的參數(shù)，可選。
modifiers：一個包含修飾符的對象
自定義指令有5個生命周期(也叫作鉤子函數(shù))分別是:
bind, inserted, update, componentUpdate, unbind
// 也就是在對應上面的例子中的
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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue實現(xiàn)元素拖動并互換位置的實現(xiàn)代碼
在使用Vue的場景下,需要實現(xiàn)對元素進行拖動交換位置,接下來通過本文給大家介紹vue實現(xiàn)元素拖動并互換位置的實現(xiàn)代碼,需要的朋友可以參考下2023-09-09
vue2.0 + ele的循環(huán)表單及驗證字段方法
今天小編就為大家分享一篇vue2.0 + ele的循環(huán)表單及驗證字段方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue組件文檔生成備注詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue實現(xiàn)預覽docx/xlsx/pdf等類型文件功能
這篇文章主要介紹了如何在Vue中實現(xiàn)docx/xlsx/pdf等類型文件預覽功能,在實現(xiàn)過程中，需要注意文件的格式和轉換方式，以及插件和組件的使用方法和注意事項，需要的朋友可以參考下2023-05-05
vue使用element-ui的el-date-picker設置樣式無效的解決
本文主要介紹了vue使用element-ui的el-date-picker設置樣式無效的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-03-03
這篇文章主要為大家詳細介紹了Vue中用JSON實現(xiàn)刷新界面不影響倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了解決在vue的mounted中獲取對象為null問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
今天小編就為大家分享一篇vue實現(xiàn)修改圖片后實時更新，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家介紹了springboot+vue測試平臺前端項目實現(xiàn)查詢新增功能，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-05-05
本文主要介紹了Vue3中同時定義多個插槽的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-12-12