混入 vue,vue混入和组件的区别
本文主要介绍Vue和期权合并的混合使用。边肖认为这很好。现在分享给大家，给大家一个参考。来和边肖一起看看吧。
:
目录
1.用于组件2。选项合并概要
1、在组件中使用
Mixin提供了一种非常灵活的方式来在Vue组件中分发可重用的功能。混合对象可以包含任何组件选项。当组件使用混合对象时，混合对象的所有选项都将“混合”到组件本身的选项中。
模板
div class=event_style
H2 /h2
div class=inner_children
span{{ message }}/span
/div
/div
/模板
脚本
var myMixin={
data() {
返回{
消息： ，
};
},
已创建：函数(){
console . log( created:add mixin )；
this . message= created:add mixin ；
this . hello()；
},
方法：{
你好：函数(){
console.log(你好，来自mixin！);
},
},
};
//定义使用混合对象的组件。
导出默认值{
名称： mixin-basic ，
mixins: [myMixin]，
};
/脚本
2、选项合并
当组件和混合对象包含相同名称的选项时，这些选项将以适当的方式“合并”。
例如，数据对象将在内部递归合并，如果发生冲突，组件数据将优先。
模板
div class=event_style
H2选项合并/h2
div class=inner_children
span{{ message }}/span
span{{ message1 }}/span
/div
/div
/模板
脚本
var myMixin={
data() {
返回{
消息：“mixin:mixin”，
消息1:“mixin:mixin-1”，
};
},
已创建：函数(){
this . hello()；
},
方法：{
你好：函数(){
console.log(mixin:你好，来自mixin！);
},
},
};
//定义使用混合对象的组件。
导出默认值{
名称：混合-合并，
mixins: [myMixin]，
data() {
返回{
消息：“组件：你好”，
};
},
已创建：函数(){
this . hello()；
},
方法：{
你好：函数(){
console . log( Component:hello world！);
},
},
};
/脚本
样式范围。event_style {
左填充：50px
填充-右：50px
}。inner_children {
显示器：flex
伸缩方向：列；
高度：150px
边框：1px纯色# 333；
填充：6px
}。inner_children跨度{
字体大小：20px
}
/风格
页面呈现的效果
从上图可以看出，当混合的数据和方法与组件定义发生冲突时，组件优先，当组价未定义时，则合并以显示混合定义的效果。
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。