vue混入-Mixins

mixins是一种分发组件中可复用功能的非常灵活的方式

1.创建mixins

export const myMixins = {
  components:{},
  data() {
    return {
      msg:"mixins msg"
    }
  },
  created(){
    console.log("mixins created")
  },
  mounted() {
    console.log("mixins mounted")
  },
  methods: {
    handleClick() {
      console.log("mixins 点击事件")
    }
  }

1.使用

<template>
    <div>
       <h1>{{msg}</h1>
       <button @click="handleClick">点击事件</button>
    </div>
</template>

<script>
import { myminxin } from "../mixins";
export default{
  mixins:[myminxin],
  data(){
     return{
       msg:"组件msg"
     }
  }
  created() {
    console.log("组件 created");
  },
  mounted() {
    console.log("组件 mounted ");
  },
  methods:{
    handleClick(){
        console.log("组件点击事件")
    }
  }
  
}
</script>

合并冲突

1. 值为对象(components、methods 、computed、data)的选项，优先组件，混入对象会被覆盖
2. 值为函数(created、mounted)的选项，混入先调用，组件的后调用