VUE3.0,DAY46，vue的mixin混入

写一个案例以便分析

使用vue脚手架，创建一个模板，我们只改动其中的main.js和App.vue，另外自己在components文件夹下新建两个组件student.vue和school.vue。代码如下

//main.js的代码
// 引入vue
import Vue from "vue";
//引入app
import App from './App.vue'
//关闭vue的生成提示
Vue.config.productionTip = false
//创建vm
new Vue({
    el: "#app",
    render:h=>h(App)
})

//App.vue的代码
<template>
  <div>
    <School></School>
    <hr />
    <Student></Student>
    <hr />
  </div>
</template>

<script>
//引入School组件
import School from "./components/School.vue";
//引入Student组件
import Student from "./components/Student.vue";
//注册组件
export default {
  name: "App",
  components: { School, Student },
};
</script>

<style>
</style>

//school.vue的代码
<template>
  <div>
      <!-- 增加一个弹窗事件，点击学校的名称是会弹窗提示 -->
    <h2 @click="showName">学校的名称：{{ name }}</h2>
    <h2>学校的地址：{{ address }}</h2>

  </div>
</template>

<script>
export default {
  School: "School",
  data() {
    return {
     name: "我是一个程序员",
     address:"哈哈"
    };
  },
  methods: {
      showName(){
          alert(this.name)
      }
  },
};
</script>

//student.vue的代码
<template>
  <div>
      <!-- 增加一个弹窗事件，点击学校的名称是会弹窗提示 -->
    <h2 @click="showName">学生姓名：{{ name }}</h2>
    <h2>学生的性别：{{ sex }}</h2>

  </div>
</template>

<script>
export default {
  School: "School",
  data() {
    return {
     name: "程序员2号",
     sex:"男"
    };
  },
  methods: {
      showName(){
          alert(this.name)
      }
  },
};
</script>

查看实现的页面效果，使用vs code运行终端，输入命令npm run serve。点击学校的名称，会弹窗，点击学生姓名也会弹窗。

对比自定义的两个组件（混入）

我们发现有部分内容是相同的，那么我们可以单独写一个文件，用蓝色框表示，然后把这两个自定义组件内相同的内容删掉，直接写一个引入蓝色框的代码即可。这就是混入。两个组件共享同一个配置。

我们删除掉两个自定义组件内的methods方法代码，与APP.vue同级别目录下新建mixin.js（文件的名字可以自定义），编写methods方法，然后里边的代码如下。

// 这里的mixin也可以自定义换成别的，如const a
const mixin = {
    methods: {
        showName() {
            alert(this.name)
        }
    }
}

//暴露我们写的mixin，能够让别的文件引入
export default mixin

然后在我们的自定义组件school和student中引入。代码如下

//school.vue的代码
<template>
  <div>
    <!-- 增加一个弹窗事件，点击学校的名称是会弹窗提示 -->
    <h2 @click="showName">学校的名称：{{ name }}</h2>
    <h2>学校的地址：{{ address }}</h2>
  </div>
</template>

<script>
// 引入刚写的mixin.js(混合)
import mixin from "../mixin";
export default {
  School: "School",
  data() {
    return {
      name: "我是一个程序员",
      address: "哈哈",
    };
  },
  //注意这里的代码mixins，是加了s的，这里必须写mixins
  mixins: [mixin],
};
</script>

//student.vue的代码
<template>
  <div>
      <!-- 增加一个弹窗事件，点击学校的名称是会弹窗提示 -->
    <h2 @click="showName">学生姓名：{{ name }}</h2>
    <h2>学生的性别：{{ sex }}</h2>

  </div>
</template>

<script>
// 引入刚写的mixin.js(混合)
import mixin from "../mixin" 
export default {
  School: "School",
  data() {
    return {
     name: "程序员2号",
     sex:"男"
    };
  },
  //注意这里的代码mixins，是加了s的，这里必须写mixins
  mixins:[mixin]
};
</script>

最后页面效果。使用vs code 运行终端，输入npm run serve

注意：我们这里使用的叫局部混合，还有全局混合，我们就把引入混合的代码写在main.js中，不写在我们的自定义组件中。那么我们所有的vue文件都会引入了这个混合文件。代码如下：

// 引入vue
import Vue from "vue";
//引入app
import App from './App.vue'
//关闭vue的生成提示
Vue.config.productionTip = false


//全局混合mixin引入,括号内是我们写的混合文件中，自定义一段代码的名字
//vue.mixin(mixin)

//创建vm
new Vue({
    el: "#app",
    render:h=>h(App)
})

总结

功能:可以把说个组件共用的配置提取成一个混入对象
使用方式:
第一步定义混合，例如:
{
data(){…},
methods:{…}
…
}
第二步使用混入，例如:
(1).全局混入: Vue . mixin( xxx)
(2).局部混入: mixins:[ ‘xxx’]