mixin混入,VUE,vue 混合 mix函数
本文主要介绍混合在vue中的使用，包括全局混合和局部混合。以下两者相关，有一定参考价值，有需要的小伙伴可以参考一下。
目录
mixins了解使用方法，全局混合与局部混合与mixins，复用方法覆盖合并生命周期。
mixins
混合 (mixins)是在Vue组件中分发可重用功能的一种非常灵活的方式。
混合对象可以是包含任意组件选项。
当组件使用混合对象时，对于组件本身，所有混合对象的选项将为混入。
mixins理解
组件被引用后，相当于在父组件内开辟了一块单独的空间，根据父组件属性中的值进行相应的操作。本质上，两个组件还是泾渭分明，相对独立。
另一方面，Mixins在引入组件后，将组件的内部内容(如数据和其他方法和方法)与父组件的相应内容合并。相当于引入后，扩展了父组件的各种属性方法。
单纯组件引用：
父组件 + 子组件父组件 + 子组件mixins：
父组件 + 子组件new父组件有点像注册vue的一个公共方法，可以在Vue对象的多个组件或者多个实例中使用。另一方面，类似于在prototype对象中注册方法，实例对象，也就是组件或者Vue实例对象，仍然可以是定义相同函数名的方法进行覆盖，有点像子类和父类的感觉。作用：
简单的话总结就是分布式vue组件中的功能可以重用的技术。利用这种技术，我们可以把需要复用的内容打包成一个vue组件，方便下次使用。
使用方法
首先在src中创建自己的文件夹，然后把要封装的内容放到这个文件夹中，以备后续调用。
让我的混音={
方法：{
handleBtn(){
Alert(封装的内容已被触发！)
}
}
}
导出默认mymixin
全局混入
全局混合意味着我们可以在main.js中全局注册打包的组件，方便在任何地方使用。
从导入myMixins。/mixins/index.js
//全局混合
Vue.mixin(myMixins)
局部混入
也就是说，引用的重用内容只能在当前组件中生效。
模板
按钮@click=handleBtn 点I触发器/按钮
/模板
脚本
从“@/mixin.js”导入myMixins
导出默认值{
混合蛋白：[我的混合蛋白]
}
/脚本
风格
/风格
这样就实现了简单的混合，降低了代码的复用性，大大提升了开发效率，让你可以安心的考虑业务，而不是不停的敲代码。
mixins的使用
方法的复用
html
div id=应用程序
孩子/孩子
小孩/小孩
/div
js
Vue.component(child ，{
模板：` h1 @click=foo 子组件/h1 `，
方法：{
foo(){
console . log( Child foo() this . msg)
}
}
})
Vue.component(kid ，{
模板：` h1 @click=fookid组件/h1 `，
方法：{
foo(){
console.log(Kid foo() this.msg)
}
}
})
在使用mixins之前，在两个不同的组件中调用foo方法需要重复定义。如果方法更复杂，代码会更冗余。若借助mixins，则变得十分简单：
let mixin={
data(){
返回{
消息：1
}
},
方法：{
foo(){
console.log(来自mixin的你好！- this.msg)
}
}
}
var child=Vue.component(child ，{
模板：` h1 @click=foo 子组件/h1 `，
mixins:[mixin]
})
Vue.component(kid ，{
模板：` h1 @click=fookid组件/h1 `，
mixins:[mixin]
})
虽然在这里，两个组件用可以通过this.msg引用mixins中定义的msg，边肖尝试两个组件引用的并不是同一个msg，但每个创造了一个新的味精。如果在一个组件中定义了相同的数据，这里将引用组件中的消息，而不是mixins中的消息。
方法的覆盖
如果引用mixin时在组件中重复定义相同的方法，mixin中的方法将被覆盖。
var child=Vue.component(child ，{
模板：` h1 @click=foo 子组件/h1 `，
mixins:[mixin]，
方法：{
foo(){
console . log( Child foo() this . msg)
}
}
})
此时，如果单击h1选项卡，将在控制台中打印 Child foo() 1 3，并合并生命周期。此时，如果您单击h1选项卡，将在控制台中打印 Child foo() 1 。
合并生命周期
let mixin={
已安装(){
Console.log(mixin say hi)//先输出
},
data(){
返回{
消息：1
}
},
方法：{
foo(){
console . log( mixin foo() this . msg)
}
}
}
让vm=new Vue({
埃尔： #app ，
数据：{
味精：2
},
已安装：函数(){
Console.log(app say hi)//之后输出
},
方法：{
foo(){
console . log( Parent foo() this . msg)
}
}
})
通过上面的介绍，我们现在对mixins有了深入的了解，这是设计复杂部件时所必需的。
关于mixin在vue中的混合和使用的这篇文章就到这里了。关于vue中mixins的更多信息，请搜索我们以前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。