mixins (混入) 是一种分发Vue组件中可以复用功能,是一种非常灵活的方式,混入对象可以包含任意组件选项,当组件使用混入对象时,所有混入对象的选项将混入该组件本身的选项;暂时还没有到使用项目的时候,先进行对 mixins 一个基本的使用和掌握。
Mixins
下面我们做一个简单的事件处理;用button按钮,点击的时候触发事件;那么就是button绑定一个handleClick的点击事件,紧接着在methods当中来完成相应的事件处理;如下:
<div id="app">
<button type="button" @click="handleClick">点击</button>
</div>
<script>
new Vue({
el:'#app',
methods:{
handleClick(){
console.log('---click---')
}
}
})
</script>
那么现在是将这个handleClick的方法分别也让其他页面去使用它,那么handleClick就应该外边来,然后在methods中去用这个方法;如下:
<div id="app">
<button type="button" @click="handleClick">点击</button>
</div>
<script>
function handleClick(){
console.log('---click---');
}
new Vue({
el:'#app',
methods:{
handleClick : handleClick
}
})
</script>
上述代码可以看出只要我们想让其他页面使用,写在外面即可,然后在methods去写对应的事件用就可以了,那可以将外边的结构跟里面的一样就可以,就可以不用在methods中去一个一个写handleClick : handleClick 这种,可以这样来写,如下:
<div id="app">
<button type="button" @click="handleClick">点击</button>
</div>
<script>
const obj = {
methods:{
handleClick(){
console.log('---click---');
}
}
}
new Vue({
el:'#app',
})
</script>
那么如何去使用到 obj 当中的methods方法,就是这篇内容的主角Mixins,将obj这个对象混入去使用,在其他页面使用的时候也可以通过混入使用到obj对象当中的methods方法,在这里就不讲在项目当中的使用,后续有的话会讲,这里主要是对mixins有基本的了解和掌握就可以了,那么如何混入呢?如下:
<div id="app">
<button type="button" @click="handleClick">点击</button>
</div>
<script>
const obj = {
methods:{
handleClick(){
console.log('---click---');
}
}
}
new Vue({
el:'#app',
mixins:[obj] // 共用,混入obj对象
})
</script>
以上就是对混入的一个基本掌握!
Mixins 就近原则
那么在使用 mixins 当中难免会出现什么样的问题呢?在混入的页面当中已有该方法(方法名称相同但事件处理的内容不同),那么mixins是如何来处理的?来实践一下:
<div id="app">
<button type="button" @click="handleClick">点击</button>
</div>
<script>
const obj = {
methods:{
handleClick(){
console.log('---执行mixins中的---');
}
}
}
new Vue({
el:'#app',
mixins:[obj], // 共用,混入obj对象
methods:{
handleClick(){
console.log('---执行自身methods中的---');
}
}
})
</script>
实践证明mixins会执行自身methods中的handleClick方法而不是执行mixins中的方法,使用mixins造成同名函数方法的时候,页面是会采用"就近原则",它会用自身的methods,而不是mixins中的methods方法,跟自身的methods比较的亲!
Mixins - 混入 computed / data
尝试混入了methods,那么这会就有人开始想了,那么computed 计算属性的内容呢?data 中的数据呢?答案是可以混入的。
<body><div id="app">
<button type="button" @click="handleClick">点击</button>
<p>Mixins中的data -- userName:{{userName}}</p>
<p>Mixins中的computed -- getInfo:{{getInfo}}</p>
</div>
<script>
const obj = {
data:{
userName:'user'
},
methods:{
handleClick(){
console.log('---执行mixins中的---');
}
},
computed:{
getInfo(){
return "admin"
}
}
}
new Vue({
el:'#app',
mixins:[obj], // 共用,混入obj对象
methods:{
handleClick(){
console.log('---执行自身methods中的---');
}
}
})
</script>
这篇的内容就到此结束了,本篇内容记录的是mixins的一个基本使用以及掌握mixins的一些基本知识点!附上官方文档: Mixins — Vue.js