vue的mixin用法,vue mixin执行顺序
本文主要介绍用mixin实现Vue合并重码。本文中的示例代码非常详细，对于大家的学习或者工作都有一定的参考价值。让我们和边肖一起学习。
我们做项目的时候，经常会有很多代码逻辑是通用的，比如业务逻辑类型的判断，时间戳的转换，URL中字符串的截取等等。这些函数如果在每个需要的页面中都加入的话，不仅加重了当前页面的逻辑复杂程度，还会占用大量原本可以省略的内存.因此，有必要对这些代码进行整理，进行统一管理。在vue项目中，我们都知道模块化和组件化，但是vue框架中还有一个很有用的知识点，就是mixin。
Mixin不仅可以存储数据、观察、方法、计算等。也是Vue的生命周期。是不是很神奇？
点击“点击我”按钮，在“不舒服”和“优秀”之间切换。首先，上效果图：
初始页面：
子组件1和子组件2都可以通过单击我来更改其状态。触发子组件1的按钮1次按钮触发子组件2次，效果如下：
2
其中增加了mixin文件夹，增加了Child1.vue和Child2.vue，HelloWorld.vue改成了Father.vue因为我有代码洁癖，觉得vueRouter默认的hash模式会让前端路由有点难看，所以改成了历史模式， 项目的核心结构如下：:
项目更改的文件代码如下
模板
div class=Child1
H1我是子组件1/h1。
p我非常{{status}}/p
Button @click=submitChange 单击我/button
/div
/模板
脚本
从导入{ Happy }./mixin/showHappy
导出默认值{
名称：“孩子1”，
米欣：[开心]
}
/脚本
Child1.vue
模板
div class=Child2
H1我是2/h1的子组件。
p我非常{{status}}/p
Button @click=submitChange 单击我/button
/div
/模板
脚本
从导入{ Happy }./mixin/showHappy
导出默认值{
姓名：“孩子2”，
米欣：[开心]
}
/脚本
Child2.vue
模板
div class=父亲
H1我是父组件/h1
子1-组件/
子2-组件/
/div
/模板
脚本
从导入Child1Component。/Child1
从导入Child2Component。/Child2
导出默认值{
姓名：父亲，
data () {
返回{
消息：“欢迎使用你的Vue.js应用”
}
},
组件：{
child 1组件，
child 2组件
}
}
/脚本
Father.vue
/*这是专门用于mixin测试的(点击按钮会改变相应的状态)*/
导出常量Happy={
data(){
返回{
isRealHappy:没错，
状态： ，
伤心：“不舒服”，
舒适：“舒适”
}
},
方法：{
submitChange(){
如果(this.isRealHappy){
this.isRealHappy=！这真的很开心
这种状态=这种舒适
}否则{
this.isRealHappy=！这真的很开心
这个. status=这个. sad
}
}
}
}
mixin/showHappy.js
从“vue”导入Vue
从“vue路由器”导入路由器
从“@/组件/父亲”导入父亲
Vue.use(路由器)
常量路由=[
{
路径：“/”，
姓名：父亲，
组件：父亲
}
]
常量路由器=新路由器({
模式：“历史”，
路线
})
导出默认路由器
router/index.js
那么，代码贴了这么多，mixin究竟有啥用呢？那就是代码复用
如果我们不用mixin这种方式，直接把这段代码贴到Child1.vue和Child2.vue中，也是可以实现与页面展示一样的效果：显然，米欣的文笔更为优雅。虽然项目中没有这么简单的代码，但这是一个想法！让我们更精一点，让项目把代码做的越高越好，这样我们一定会成为更好的程序员！
顺便用个小细节，如果组件中出现了和mixin中相同的属性或方法，那么组件中的属性和方法会先显示出来！小伙伴们，我们一起加油吧！
关于用Vue mixin实现合并重复代码的这篇文章到此为止。关于用Vue mixin合并重复代码的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。