Vue混入

混入基础

一个混入对象可以包含任意组件选项。
当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项

<script>
 var myMixin = {
   created: function () {
     this.hello()
   },
   methods: {
     hello: function () {
       console.log('hello from mixin!')
     }
   }
 }

  var Component = Vue.extend({
    mixins: [myMixin]
  })

  var component = new Component();
</script>

选项合并

• 当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”
  比如，数据对象再内部会进行递归合并，并在发生冲突时以组件数据有先。

<script>
  var mixin = {
    data: function() {
      return {
        message: 'hello',
        foo: 'abc'
      }
    }
  }

  new Vue({
     mixins: [mixin],
     data: function(){
       return{
         message: 'goodbye',
         bar: 'def'
       }
     },
     created: function() {
       console.log(this.$data)
     }
  })
</script>

• 混入对象的钩子将在组件自身钩子之前调用

<script>
  var mixin = {
    created: function() {
      console.log("混入对象的钩子先被调用");
    }
  }

  new Vue({
    mixins: [mixin],
    created: function(){
      console.log("组件钩子后被调用")
    }
  })
</script>

• 值为对象的选项，例如methods，components 和directives，
  将被合并为同一个对象，两个对象键名冲突时，取组件对象的键值对

<script>
  var mixin = {
    methods: {
      foo: function () {
        console.log('foo')
      },
      conflicting: function () {
        console.log('from mixin')
      }
    }
  }

  var vm = new Vue({
    mixins: [mixin],
    methods: {
      bar: function () {
        console.log('bar')
      },
      conflicting: function () {
        console.log('取组件对象的键值对')
      }
    }
  })

  vm.foo() 
  vm.bar() 
  vm.conflicting() 
</script>

全局混入

<script>
	Vue.mixin({
	   created:function(){
	     var myOption = this.$options.myOption
	     if(myOption){
	       console.log(myOption)
	     }
	   }
	 })
	
	 new Vue({
	   myOption: 'hello'
	 })
</script>