vue中怎么合并公共的方法(mixin的用法)

mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。其实就是mixin中的属性和方法与组件中的属性和方法进行合并，相当于扩展了父组件的属性与方法。

<template>
  <div>
    <button @click="handleClick">点我</button>
  </div>
</template>

//component.vue
<script>
import {
    
     mixin } from '../../mixins/mixin.js'
export default {
    
    
  mixins:[mixin],
  data(){
    
    
    return {
    
    
      isShowBtn: false,
    }
  },
  created(){
    
    
    //created,mounted等，都会被调用，混入对象的钩子将在组件自身钩子之前调用，但最终的值是由组件里的值决定(如果有初始值的话)。
    console.log(this.$data.isShowBtn,'component'); //false
  },
  methods: {
    
    
    handleClick(){
    
    
      //组件里的方法与mixin的方法名相同时,会使用组件本身的方法
      alert("在component里点击了")
    }
  },
}
</script>

//mixin.js
export const mixin = {
    
    
    data() {
    
    
        return {
    
    
            isShowBtn: true,
        };
    },
    created() {
    
    
        console.log(this.isShowBtn,"mixin");   //false
    },
    methods: {
    
    
        handleClick() {
    
    
            alert("在mixin里点击了");
        }
    }
}