vue3 mixins,vue 混合 mix函数
本文主要介绍Vue.js的mixins混合组件的详细说明，通过一个简单的案例来说明对该技术的理解和使用。以下是详细内容，有需要的朋友可以参考一下。
Hybrid以灵活的方式为组件提供分布式复用功能。混合对象可以包含任意组件选项。当组件使用混合对象时，混合对象的所有选项都将“混合”到组件自己的选项中。
一、Mixins的基本用法
现在有一个数字点击增量程序，假设已经完成。这时，我们希望每次数据发生变化时，都能在控制台上打印出提示：“数据发生变化”。
代码实施流程：
div id=应用程序
pnum:{{ num }}/p
Pbton @ click= add 增加数量/button/P
/div
脚本
var addLog={
//将更新的钩子混合到vue实例中
已更新(){
Console.log(数据发布更改，更改为 this.num 。);
}
}
var app=新Vue({
埃尔： #app ，
数据：{
数字：1
},
方法：{
add: function () {
this.num
}
},
混合：[addlog]，//混合
})
/脚本
当点击按钮时，将触发mixed addLog中的更新方法。
二、mixins的调用顺序
从执行顺序来看，都是混入的先执行，然后构造器里的再执行。
数据中的属性和方法中的方法，会覆盖(构造函数包含混合的属性和方法)
生命周期的钩子会被调用两次，不会覆盖(先调用混合钩子，再调用构造器钩子)。
在上述代码的构造函数中，我们还添加了更新后的hook函数：
div id=应用程序
pnum:{{ num }}/p
Pbton @ click= add 增加数量/button/P
/div
脚本
var addLog={
已更新：函数(){
Console.log(数据发布更改，更改为 this.num 。);
}
}
var app=新Vue({
埃尔： #app ，
数据：{
数字：1
},
方法：{
add: function () {
this.num
}
},
已更新：函数(){
Console.log(构造函数中的更新方法。)
},
混合：[addlog]，//混合
})
/脚本
三、全局混入方式
全局混合的执行顺序优先于混合和构造函数中的方法。
div id=应用程序
pnum:{{ num }}/p
Pbton @ click= add 增加数量/button/P
/div
脚本
Vue.mixin({
已更新：函数(){
Console.log(我全球混进来)；
}
})
var addLog={
已更新：函数(){
Console.log(数据发布更改，更改为 this.num 。);
}
}
var app=新Vue({
埃尔： #app ，
数据：{
数字：1
},
方法：{
add: function () {
this.num
}
},
已更新：函数(){
Console.log(构造函数中的更新方法。)
},
混合：[addlog]，//混合
})
/脚本
顺序总结：全局混入 局部混入 构造器
两个对象键名冲突时，取组件对象的键值对
当混入和组件对象中都有test方法（重名）时，最终的值取组件对象的键值对
div id=应用程序
pnum:{{ num }}/p
P
按钮@click=add 增加数量/按钮
/P
/div
脚本
var addLog={
已更新：函数(){
Console.log(数据发布更改，更改为 this.num 。);
this . test()；
},
方法：{
测试：函数(){
Console.log(测试混合)
}
}
}
var app=新Vue({
埃尔： #app ，
数据：{
数字：1
},
方法：{
add: function () {
this.num
},
测试：函数(){
Console.log(在组件对象中测试)
}
},
混合：[addlog]，//混合
})
/脚本
关于Vue.js的mixins组件的详细说明这篇文章到此为止，更多关于Vue.js的mixins组件的相关内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。