mixin 抽离组件公共逻辑,好处是方便维护,只要在mixin中进行一次修改,就可以将所有引入了mixin的组件内公共逻辑一次性修改。
mixin.js文件,文件名可以自定义
// 抽离组件公共逻辑,方便维护 export default { data () { return { mixinData: '我是公共数据' // 公共数据 } }, methods: { // 公共方法 }, mounted () { // 公共钩子 } // 等等 }
拥有公共逻辑的组件一
// 在组件中可以使用 <template> <!-- mixin中定义的数据可以直接使用了 --> <div>{{mixinData}}</div> </template> <script> import mixin from 'mixin文件的路径'; export default { mixins: [mixin], // 可以有多个mixin,直接在页面中就可以使用mixin文件定义的逻辑 // ... } </script> <style> </style>
拥有公共逻辑的组件二
// 在组件中可以使用 <template> <!-- mixin中定义的数据可以直接使用了 --> <div>{{mixinData}}</div> </template> <script> import mixin from 'mixin文件的路径'; export default { mixins: [mixin], // 可以有多个mixin,直接在页面中就可以使用mixin文件定义的逻辑 // ... } </script> <style> </style>
mixin文件中的mixinData修改了,引用到的两个组件内的数据就一起修改了,不用在
两个组件内进行修改了,如果引用的组件多的话,就更能体现出mixin的方便维护的好处了。
这里的两个组件是一样的(为了偷懒,哈哈),达到效果就好了。