Vue mixins详解与使用技巧
Vue mixins详解与使用
mixins
混合 (mixins) 是一种分发 vue 组件中可复用功能的非常灵活的方式。
混合对象可以包含任意组件选项。
当组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。
mixins理解
组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。
而mixins则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。
单纯组件引用：
- 父组件 + 子组件 >>> 父组件 + 子组件
mixins：
- 父组件 + 子组件 >>> new父组件有点像注册了一个vue的公共方法，可以绑定在多个组件或者多个Vue对象实例中使用。
- 另一点，类似于在原型对象中注册方法，实例对象即组件或者Vue实例对象中，仍然可以定义相同函数名的方法进行覆盖，有点像子类和父类的感觉。
作用：
用简单的话去概括就是一种分发vue组件中的功能可以复用一个技术，使用这个技术我们可以把需要复用的内容封装成一个vue组件，方便下次使用方便
使用方法
首先在src中去创建一个自己的文件夹，然后把要封装的内容放入到这个文件夹，方便后续的调用
let mymixin={
methods:{
handleBtn(){
alert('封装的内容已经触发！')
}
}
}
export default mymixin全局混入
全局混入就是我们可以把封装好的这个组件在main.js中全局注册，方便在任何地方使用
import myMixins from "./mixins/index.js" // 全局混入 Vue.mixin(myMixins)
局部混入
也就是引用的复用内容只能在当前组件中生效
<template>
<button @click="handleBtn">点我触发</button>
</template>
<script>
import myMixins from '@/mixin.js'
export default {
mixins:[myMixins]
}
</script>
<style>
</style>这样就实现了一个简单的混入，减少代码的复用性，大大加强了开发效率，你就可以安心的考虑业务，而不是不停的敲代码
mixins的使用
方法的复用
html
<div id="app">
<child></child>
<kid></kid>
</div>js
Vue.component('child',{
template:`<h1 @click="foo">child component</h1>`,
methods:{
foo(){
console.log('Child foo()'+this.msg++)
}
}
})
Vue.component('kid',{
template:`<h1 @click="foo">kid component</h1>`,
methods:{
foo(){
console.log('Kid foo()'+this.msg++)
}
}
})在借助mixins之前，在两个不同的组件的组件中调用foo方法，需要重复定义，倘若方法比较复杂，代码将更加冗余。
若借助mixins，则变得十分简单：
let mixin={
data(){
return{
msg:1
}
},
methods:{
foo(){
console.log('hello from mixin!----'+this.msg++)
}
}
}
var child=Vue.component('child',{
template:`<h1 @click="foo">child component</h1>`,
mixins:[mixin]
})
Vue.component('kid',{
template:`<h1 @click="foo">kid component</h1>`,
mixins:[mixin]
})虽然此处，两个组件用可以通过this.msg引用mixins中定义的msg，但是，小编尝试过，两个组件引用的并不是同一个msg，而是各自创建了一个新的msg。
如果在组件中定义相同的data，则此处会引用组件中的msg，而非mixins中的。
方法的覆盖
如果在引用mixins的同时，在组件中重复定义相同的方法，则mixins中的方法会被覆盖。
var child=Vue.component('child',{
template:`<h1 @click="foo">child component</h1>`,
mixins:[mixin],
methods:{
foo(){
console.log('Child foo()'+this.msg++)
}
}
})此时，若单击h1标签，则在控制台中打印"Child foo() 1" 3、合并生命周期此时，若单击h1标签，则在控制台中打印"Child foo() 1"
合并生命周期
let mixin={
mounted(){
console.log('mixin say hi')//先输出
},
data(){
return{
msg:1
}
},
methods:{
foo(){
console.log('mixin foo()'+this.msg++)
}
}
}
let vm=new Vue({
el:"#app",
data:{
msg: 2
},
mounted: function(){
console.log('app say hi')//后输出
},
methods:{
foo(){
console.log('Parent foo()'+this.msg)
}
}
})通过上面的介绍，现在对mixins有了比较深入的了解，在设计复杂组件时是很有必要的。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue cli3配置image-webpack-loader方式
这篇文章主要介绍了vue cli3配置image-webpack-loader方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要为大家介绍了vue 指令版富文本溢出省略截取示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
本篇文章主要介绍了基于vue实现swipe分页组件实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
在使用vue开发大屏时,发现了一个很好用的可视化组件库DataV,下面这篇文章主要给大家介绍了关于VUE引入DataV报错解决的实战记录,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-04-04
vue3正式版已经发布大半年了,咱也得紧跟时代潮流,vue3带来的很多改变,下面这篇文章主要给大家介绍了关于利用Vue3实现拖拽定制化首页功能的相关资料,需要的朋友可以参考下2022-05-05
选择省市区是我们大家在填写地址的时候经常会遇到的一个功能，下面这篇文章主要给大家介绍了关于利用vue.js模仿实现京东省市区三级联动选择组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。2017-11-11
vue使用element-resize-detector监听元素宽度变化方式
这篇文章主要介绍了vue使用element-resize-detector监听元素宽度变化方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
本文主要介绍了vue el-table实现递归嵌套的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
验证码功能在我们的身边用处极广，今天小编给大家分享基于vue实现随机验证码功能,感兴趣的朋友跟随小编一起看看吧2019-12-12
这篇文章主要介绍了精读《Vue3.0 Function API》，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
最新评论