一、vue混入是什么脓杉?
關(guān)于vue的混入官方給出的解釋是
混入 (mixin) 提供了一種非常靈活的方式炸渡,來分發(fā) Vue 組件中的可復用功能。一個混入對象可以包含任意組件選項丽已。當組件使用混入對象時蚌堵,所有混入對象的選項將被“混合”進入該組件本身的選項。
其實看了這句話 我是很蒙蔽的沛婴,根本不懂她在說什么
當我明白了混入是怎么用的的時候吼畏,我才明白混入是何意。
所謂的混入就是 混合的融入嘁灯,
廢話不多說泻蚊,線上代碼,演示代碼是在vue的單文件組件中使用的:
第一步
我們可以在components 文件夾中建立一個文件名字叫什么隨便取丑婿,我這邊就直接取名為mixin (‘圖為錯的'')
在文件夾中我們可以建立一個js文件性雄,minin.js 這個文件就是寫混入代碼的js
第二步
export default {
data() {
return {
name : "張三"
}
},
methods: {
handleclick(){
this.name = "李四"
}
}
}
上面的代碼的意思是,我在里面定義的數(shù)據(jù) name 和hangleclick 都可以在引入這個混入的vue文件中使用的羹奉,也就是說這個數(shù)據(jù)會和組件中的數(shù)據(jù)進行合并秒旋,如果組件中有這個數(shù)據(jù),會優(yōu)先使用組件中的數(shù)據(jù)诀拭,methods方法亦如此.
第三步
我們在vue單文件中引入
<template>
<div>
<h1>{{name}}</h1>
<button @click="handleclick">點我改名字11</button>
</div>
</template>
<script>
import minin from './minxin/minxin'
export default {
mixins: [minin],
data(){
return {
}
},
methods: {
}
}
</script>
引入之后就可以使用了迁筛,在上面的文件中name 數(shù)據(jù)就是拿的混入文件中數(shù)據(jù),
handleclick 方法就是 混入文件中的方法