Vue中mixins混入的介绍与使用详解

export const myMixins = {
components:{},
data(){
return {}
},
created(){},
mounted(){},
computed(){},
methods: {}
}

export default {
	data(){
	return {
      msg: 'erwerwe',
      form:{
        a:'aaa'
      }
    }
	},
	filters: { //过滤器
		numToString(value) {
			return value.toString();
		}
	},
	created(){ //钩子函数
		    console.log('这是混入的组件')
	},
	computed: {   //计算属性
		ids() {
				return  !this.loading
			 }
	},
	methods:{
     exm(){
      console.log('这是混入的exm方法')
      },
     clickFn(){
      console.log(this.msg)
    },
	// 其它属性方法......
		}
}

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>{{ form.a }}</h1>
    <button @click="buttonClick">current</button>
  </div>
</template>
<script>
//导入js文件
import fun from './mixins/common.js'
export default {
  name: "HelloWorld",
  mixins:[fun],  //混入 fnu对象
  created(){
    console.log('这是当前组件')
  },
  data() {
    return {
      msg: "组件的msg"
    }
  },
  methods:{
    buttonClick(){
      console.log(this.form.a)
      console.log(this.msg)
      this.clickFn();
      this.exm();
    },
    exm(){
      console.log('这是组件的exm方法')
    }
  }
}
</script>