Vue学习笔记44--mixin混入

mixin混入：可以理解为是代码的一种重构复用

一个混入对象可以包含任意组件选项（如data、methods、mounted等等）。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

示例一：局部混合示例

局部混入就是在单独的vue组件中引入了mixin混入对象

 Student.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

<!-- 组件的结构 --> <template>   <div class="demo">     <h3 @click="showName">学生姓名：{{name}}</h3>     <h3>学生性别：{{ stuAge }}</h3>   </div> </template> <!-- 组件交互相关的代码(数据、方法等) --> <script> // eslint-disable-next-line no-unused-vars import { mixin } from '../mixin.js'  //引入混合 export default ({   // eslint-disable-next-line vue/multi-word-component-names   name: 'Student',   data () {     return {       msg: '我正在学习 Vue',       name: '心仪',       stuAge: 6     }   },   // methods: {   //   showName () {   //     alert(this.name)   //   }   // }   }) </script>   <!-- 组件的样式 --> <style> .demo {   background-color: burlywood; } </style>

School.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

<!-- 组件的结构 --> <template>   <div class="demo">     <h3 @click="showName">学校姓名：{{name}}</h3>     <h3>学校地址：{{ schoolAddress }}</h3>   </div> </template> <!-- 组件交互相关的代码(数据、方法等) --> <script> // eslint-disable-next-line no-unused-vars import { mixin } from '../mixin.js'  //引入混合 export default ({   // eslint-disable-next-line vue/multi-word-component-names   name: 'Student',   data () {     return {       msg: '我正在学习 Vue',       name: '高新一小',       schoolAddress: '西安/高新一小'     }   },   // methods: {   //   showName () {   //     alert(this.name)   //   }   // }   }) </script>   <!-- 组件的样式 --> <style> .demo {   background-color: burlywood; } </style>

重构的复用代码：pub.js

?

1 2 3 4 5 6 7 8

// eslint-disable-next-line no-unused-vars export const mixin = {   methods: {     showName () {       alert(this.name)     }   } }

App.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<template>   <div>     <!-- <img src="./assets/logo.png"> -->       <Student></Student>     <hr>     <School></School>     </div> </template>   <script> // 引入组件 import Student from './components/Student.vue'; import School from './components/School.vue'; export default {   name: 'App',   components: {     Student,     School   }, } </script>   <style> </style>

main.js　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13

/* 该文件是整个项目的入口文件 */   // 引入Vue import { createApp } from 'vue' // 引入App组件，其是所有组件的父组件 import App from './App.vue' // new Vue({ //   render: h => h(App), // }).$mount('#app') // 创建实例对象vm 并将App组件放入容器中——等价于 上面代码 createApp(App).mount('#app')

示例二：全局混合示例

混入也可以进行全局注册(慎用)。一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。

全局混入我们只需要把mixin.js引入到main.js中，然后将mixin放入到Vue.mixin()方法中即可；

第一步：

注释掉个个组件中的独立引用：类似// import { mixin } from '../mixin.js'  //引入混合

第二步：main.js引入混合

?

1 2 3 4 5 6 7 8 9 10 11 12 13

// 引入Vue import { createApp } from 'vue' // 引入App组件，其是所有组件的父组件 import App from './App.vue'   import { mixin } from './mixin.js'; createApp(App).mount('#app').mixin(mixin)   // new Vue({ //   render: h => h(App), // }).$mount('#app') // 创建实例对象vm 并将App组件放入容器中——等价于 上面代码 createApp(App).mount('#app')

总结：

功能：可以把多个组件共用的配置提取成一个混入对象

使用方式：

第一步：定义混合，例如

?

1 2 3 4 5 6 7

export const mixin = {   methods: {     showName () {       alert(this.name)     }   } }

第二步：使用混合，例如

局部引用： mixins:['xxx']   // import { mixin } from '../mixin.js'  //引入混合    

全局引用：Vue.mixin(xxx)　　

?

1 2	import { mixin } from './mixin.js'; createApp(App).mount('#app').mixin(mixin)