Vue 3 mixins 混入

混入

其实混入理解很简单，就是提取公用的部分，将这部分进行公用，这是一种很灵活的方式，来提供给 Vue 组件复用功能，一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

基础

接下来我们来看一个很简单的例子，在 src/views/ 新建 mixins.js 文件：

// define a mixin object
const myMixin = {
    created() {
        this.hello()
    },
    methods: {
        hello() {
            console.log('hello from mixin!')
        }
    }
}

然后我们在 TemplateM.vue 使用 mixins 来混入 myMixins：

<template>
  <div class="template-m-wrap">
    <input ref="i