vue2 可设置公共部分mixins,可复用功能

162 阅读 0 评论 107 点赞

我是靠谱客的博主帅气金毛，这篇文章主要介绍vue2 可设置公共部分mixins,可复用功能，现在分享给大家，希望可以做个参考。

复制代码

1
2
3
4
5
6
7
8
9
import {mixinstest} from './mixins/index' 
export default {
  name: 'App',
  mixins:[mixinstest],
  components: {
    HelloWorld
  }
}

index.js

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
export const mixinstest = {
  data(){
      return {
          testMix: '混入对象的data'
      }
  },
  created(){
      console.log('这是混入对象的created1')
  },
  methods:{
      mixinsFun(){
          console.log('调用混入对象的methods的函数')
      }
  },
  computed:{
      testMix2(){
          return this.testMix+'：这是混入对象计算结果。'
      }
  },
  watch: {
      testMix(newVal,oldVal){
          console.log('混入对象的watch',newVal,oldVal)
      }
  }
}