vue混入是什么？简单聊一下vue混入

一、vue混入是什么？

关于vue的混入官方给出的解释是
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

其实看了这句话 我是很蒙蔽的，根本不懂她在说什么
当我明白了混入是怎么用的的时候，我才明白混入是何意。
所谓的混入就是 混合的融入，
废话不多说，线上代码，演示代码是在vue的单文件组件中使用的：

第一步

我们可以在components 文件夹中建立一个文件名字叫什么随便取，我这边就直接取名为mixin (‘图为错的'')

在文件夹中我们可以建立一个js文件，minin.js 这个文件就是写混入代码的js

image.png

第二步

export default {
    data() {
        return {
            name : "张三"
        }
    },
    methods: {
        handleclick(){
            this.name = "李四"
        }
    }
}

上面的代码的意思是，我在里面定义的数据 name 和hangleclick 都可以在引入这个混入的vue文件中使用的，也就是说这个数据会和组件中的数据进行合并，如果组件中有这个数据，会优先使用组件中的数据，methods方法亦如此.

第三步

我们在vue单文件中引入

    <template>
  <div>
      <h1>{{name}}</h1>
      <button @click="handleclick">点我改名字11</button>
  </div>
</template>

<script>
import minin from './minxin/minxin'
export default {
  mixins: [minin],
  data(){
    return {

    }
  },
  methods: {

  }
}
</script>

引入之后就可以使用了，在上面的文件中name 数据就是拿的混入文件中数据，

handleclick 方法就是 混入文件中的方法