溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
官網(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ā)中也常常看到如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ì)象，包含以下屬性
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指令
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼