所有智力方面的工作都要依赖于兴趣。——皮亚杰
如果我们需要在各个vue页面使用相同的公共元素
我们就可以使用minxin
官方文档：https://cn.vuejs.org/v2/guide/mixins.html
我们新建一个mixin.js
export default { data() { return { name: 'ruben' } }, created() { console.log('this.name', this.name); // 尝试访问调用方属性 console.log('this.prefix', this.prefix); }, mounted() { console.log("mixin mounted"); }, methods: { hello() { console.log("hello"); } } }
然后我们引用：
<template> <div></div> </template> <script> import mixin from '@/common/mixin.js'; export default { mixins: [mixin], data() { return { prefix: 'ruben' }; }, created() { console.log(this.name) }, methods: { } }; </script>
可以看到输出结果为：
因此引入mixin后，就算在mixin中尝试访问调用方的属性，也是能成功访问到的
注意这里它的生命周期created同时在mixin和调用方声明了，并且分别执行了两个的created
