vue混入mixin、自定义指令、自定义选项

混入mixin

官网: cn.vuejs.org/v2/guide/mi…

新建一个mixin1.js,内容如下:

var myMixin = {
    data(){
        return{
        	mixin: 'mixinData'
        }
    },
    created: function () {
        this.hello()
    },
    methods: {
        hello: function () {
          console.log('hello from mixin!')
        }
    }
}

在组件中使用:

<template>
  <div>
    <div>混入的数据:<span style="color:red">{{mixin}}</span></div>
  </div>
</template>

<script>
import myMixin from '@/components/mixins/mixin1.js'
export default {
  mixins: [myMixin],
  data(){
    return {
      
    }
  },
  methods: {
  	
  }
}
</script>

当组件和混入对象含有同名选项时，在发生冲突时以组件数据优先。