vue extends mixins,vue的mixin用法
Vue提供了mixin和Extensions配置项，最近使用发现非常好用。下面文章主要介绍Mixin扩展在Vue中的详细用法，通过示例代码详细介绍。有需要的可以参考一下。
目录
了解Mixin的官方定义，如何在项目中使用Mixin的官方定义，总结extends在项目中的使用。
认识Mixin
目前，我们使用基于组件的开发来开发应用程序，但不同组件之间存在一些相同的代码逻辑。此时，我们要提取相同的代码逻辑。
vue2和vue3都支持使用Mixin解决问题。Mixin提供了一种非常灵活的方式来在Vue组件中分发可重用的功能。Mixin对象可以包含任何组件选项。当一个组件使用Mixin对象时，所有Mixin对象的选项都会混合到组件本身的选项中。
官方定义Mixin
Mixin提供了一种非常灵活的方式来在Vue组件中分发可重用的功能。mixin对象可以包含任何组件选项。当一个组件使用mixin对象时，所有mixin对象的选项都会“混合”到组件本身的选项中。
项目中如何使用Mixin
在src文件夹下创建一个mixins文件夹
在demomixins.js文件下
导出默认值{
data() {
返回{
消息：“混合中的数据”
}
},
已安装(){
console . log( mounted in Mixins )；
},
方法：{
foo() {
console . log(“Mixins中的方法”)；
}
},
计算值：{
消息(){
返回在混合中计算
}
}
}
在Home.vue文件下
模板
div class=home
{{msg}}br
{{message}}br
Button @click=foo 点击按钮
/div
/模板
脚本
//导入js文件
从“@/mixins/demomixins.js”导入demomixins
导出默认值{
姓名：家，
data() {
返回{
};
},
Mixins:[demomixins]，//与demomixins对象混合
已安装(){
},
方法：{}，
组件：{}，
};
/脚本
虽然我们没有在home.vue中定义msg变量、消息计算属性和foo方法，但是可以在页面中显示。
Mixin的合并规则
如果Mixin对象中的选项和component对象中的冲突，Vue会怎么做？
模板
div class=home
{{msg}}br
{{message}}br
Button @click=foo 点击按钮
/div
/模板
脚本
//导入
从“@/mixins/demomixins.js”导入demomixins
导出默认值{
姓名：家，
data() {
返回{
消息：“家中的数据”
};
},
mixins:[demomixins]，
已安装(){
Console.log(安装在家中)；
},
方法：{
foo() {
console . log( home中的方法)；
}
},
计算值：{
消息(){
返回“在住宅中计算的住宅”
}
}
};
/脚本
从上面我们可以看出：
混合对象的msg属性与组件的msg属性冲突，组件的值优先。不在组件中的属性以及混合到对象中的属性会生效。
同名的钩子函数会合并成一个数组，全部调用，先调用混合函数。
值为对象的选项，如方法、计算值等。将合并成一个新对象。如果键名冲突，组件的值优先。
全局混入Mixin
如果组件中的一些选项是所有组件都需要的，那么此时我们可以使用全局mixin。一旦注册，全局混合选项将影响每个组件。
const app=createApp(App)
app.mixin({
data() {
返回{
消息：“全局数据”
}
},
})
官方定义extends
允许一个组件扩展到另一个组件，并继承该组件选项。
Extends类似于mixin，相当于继承，但它只继承options Api的内容，不继承template模板。
项目中使用extends
在components创建一个组件my.vue
脚本
导出默认值{
data() {
返回{
消息：“uu磁盘”
};
}
};
/脚本
在Home.vue文件下
模板
div class=home
{{msg}}
/div
/模板
脚本
//导入
从“@/组件/我的”导入我的
导出默认值{
姓名：家，
扩展：我的，
data() {
返回{
};
},
};
/脚本
开发中很少使用扩展。Vue2推荐Mixin，Vue3推荐Composition API。
总结
这篇关于Vue中Mixinamp的文章；extends使用的详细文章到此为止。有关Vue中Mixinamp的更多信息；请搜索我们以前的文章，或者继续浏览下面的相关文章，了解extends的内容。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。