Vue之Mixins(混入)的使用方法

var Mymixin = {
  data: function(){
   return {
    message: 'hello',
    foo: 'abc'
   }
  }
}
 export default {
  mixins:[Mymixin],
  data(){
   return{
    message:'good',
    bar:'kiss'
   }
   
  },
  created(){
   console.log(this.$data) //bar: "kiss",foo: "abc",message: "good"
  },

<script>
var Mymixin = {
  created: function(){
   console.log('混入对象的钩子被调用')
  }
}
 export default {
  mixins:[Mymixin],
  data(){
   return{
    message:'good',
    bar:'kiss'
   }
   
  },
  created(){
   console.log('组件钩子被调用') 
   // 混入对象的钩子被调用
   // 组件钩子被调用
  }
 }
</script>

<script>
var Mymixin = {
  methods: {
   foo: function(){
    console.log('foo')
   },
   conflicting: function(){
    console.log('from mixin')
   }
  }
}
 export default {
  mixins:[Mymixin],
  created(){
   this.foo()
   this.conflicting()
   this.bar() 
   // foo
   // from self
   // bar
  },
  methods:{
   bar:function(){
    console.log('bar')
   },
   conflicting: function(){
      console.log('from self')
   }
  }
 }
</script>

// 为自定义的选项 'myOption' 注入一个处理器。可在main.js中写入
Vue.mixin({
 created: function () {
  var myOption = this.$options.myOption
  if (myOption) {
   console.log(myOption)
  }
 }
})
在任意组件里面都可以使用
new Vue({
 myOption: 'hello!'
})
// => "hello!"
export default {
  myOption: 'hello!',
 }