Vue mixin,vue的mixin实际应用在哪里
本文主要介绍了vue的mixin的使用，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
vue的mixin使用mixin中的数据访问方法并在mixin/index . jshome . vueabout 2 . vue mixin使用mixin/index . jshome . vueabout 2 . vue summary中计算。
vue之mixin的使用
作用:组件引入后，组件的内部内容，如数据等方法和手段，与父组件的相应内容合并。相当于引入后，扩展了父组件的各种属性方法。
data数据的等访问原则:如果当前使用mixin的组件有数据或方法，则直接使用当前组件的数据或方法，否则直接继承mixin内部的数据和方法。
注意点:可以在每个组件中定义和使用公共变量。引入组件后，各变量相互独立，值的修改在组件中不会相互影响。
注意点2:mixin引入后与组件中的对象和方法合并，相当于扩展了父组件的数据资料和方法，可以理解为形成一个新的组件。
mixin之中的data数据访问
mixin / index.js
导出默认值{
data () {
返回{
味精：“我是混合中的味精”
}
},
已创建(){
},
已安装(){ }，
方法：{
}
}
Home.vue
在Home组件中使用mixin
模板
差异
Div-{{msg}}/div/*由home修改的MSG */
/div
/模板
脚本
从“@/mixin/index.js”导入mixin；
导出默认值{
姓名：家，
mixins: [mixin]，
data() {
return { }；
},
已创建(){
//获取mixin的数据
Console.log(home print it ，this . msg)；//首页打印出来。我是米欣里的味精
//修改mixin的数据
This.msg=由home修改的msg
Console.log(home print it ，this . msg)；//home打印home修改的msg。
},
方法：{
},
};
/脚本
style lang=scss 范围
/风格
About2.vue
模板
差异
Div约2-{{msg}}/div/*修改后的msg约2 */
/div
/模板
脚本
从“@/mixin/index.js”导入mixin；
导出默认值{
名称：大约2 ，
mixins: [mixin]，
组件：{}，
data() {
返回{
消息：“本地消息”，
};
},
已创建(){
Console.log(about2 print it ，this . msg)；//本地消息
This.msg= about2 modified msg
Console.log(about2 print it ，this . msg)；//about2修改消息
//最后一页显示修改后的msg数据大约为2
},
方法：{
},
};
/脚本
style lang=scss 范围
/风格
mixin中的 methods方法和computed使用
mixin / index.js
导出默认值{
data () {
返回{
味精：“我是混合中的味精”
}
},
已创建(){ }，
已安装(){ }，
计算值：{
用户名(){
返回“我是计算属性的用户名”；
},
},
方法：{
tipMsg () {
Console.log(民信中的tipMsg方法，this . msg)；
},
提示信息(信息){
Console.log(民信中的tipInfo方法，info)；
}
}
}
Home.vue
模板
差异
divhome - msg-{{ msg }}用户名-{{用户名}}/div
/* home-msg-home modified msg UserName-我是计算属性的用户名*/
/div
/模板
脚本
从“@/mixin/index.js”导入mixin；
导出默认值{
姓名：家，
mixins: [mixin]，
组件：{}，
data() {
return { }；
},
已创建(){
//获取mixin的数据
Console.log(home print it ，this . msg)；//首页打印出来。我是米欣里的味精
//修改mixin的数据
This.msg=由home修改的msg
Console.log(home print it ，this . msg)；//home打印home修改的msg。
//调用mixin中的tipMsg方法
this . tipmsg()；//msg由民信中的tipMsg方法home修改
This.tipinfo(我是家里的鸡信息)；//民信中的tipInfo方法。我是家里的鸡信息。
},
方法：{}，
};
/脚本
style lang=scss 范围
/风格
About2.vue
模板
差异
divabout2 - {{ msg }}用户名- {{用户名} }/分区
/*大约2 -大约2修改的消息用户名-我是计算属性的用户名*/
/div
/模板
脚本
从" @/mixin/index.js "导入mixin
导出默认值{
名称：大约2 ,
mixins: [mixin]，
组件：{},
data() {
返回{
消息： 本地的消息，
};
},
已创建(){
console.log(about2打印一下，这个。味精)；//本地的味精
this.msg=关于2修改的msg ；
console.log(about2打印一下，这个。味精)；//大约2修改的味精
//最后页面显示的大约2修改的味精这个数据
这个。tipmsg()；//最后打印-我是大约2本地的tipMsg方法
这个。tipinfo()；//民心内的tipInfo方法不明确的
},
方法：{
tipMsg() {
console.log(我是大约2本地的tipMsg方法);
},
},
};
/脚本
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。