「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」
概念
可以将各个组件中可 共有的数据和方法 抽离出来写成一个混合对象
局部混入
- 定义混入：新建一个mixin.js文件，里面声明一个对象，保存被复用的数据和方法。并且将这个对象暴露出去
// mixin.js
const mixin = { // 不一定命名为mixin
// 被复用的属性和方法
}
export const hunhe = { // 暴露的多种写法
// 被复用的属性和方法
}
export mixin // 这里最好使用分别暴露，别用默认暴露，因为可以声明多个混合，在组件中按需引入
- 引入混入：根据暴露的方法，在组件中通过import引入需要用到的混入对象
- 配置混入：在组件中配置一个mixins节点，值是一个数组，里面元素是需要使用的混入对象
import {mixin, hunhe} from '../mixin.js'
export default {
name: 'Test',
data(){},
methods: {},
mixins: [mixin,hunhe]
}
- 若在mixin.js中写的属性和方法 与 引入它的组件中的属性和方法 产生了冲突，则以组件中的配置为准
- 在mixin.js中写的生命周期钩子，也会在所有引入混合的组件中生效，且不会与组件本身的生命周期钩子的设置产生冲突(即两边写的都会生效)
全局混入：
全局混入需要使用Vue.mixin( )方法
- 引入混入：在main.js中引入需要使用的混入对象
- 配置混入：在main.js中，使用Vue.mixin( )，参数写的是需要使用的混入对象
// main.js
import Vue from 'vue'
import {mixin, hunhe} from './mixin.js'
Vue.mixin(mixin)
Vue.mixin(hunhe)
使用全局混入后，整个应用的所有组件(vc)和vm都会得到混入模块
例子：
两个组件中都要使用到一模一样的show方法，则可以将show方法抽离出来，在mixin.js中声明混入对象。在需要使用show方法的组件中进行引入和配置即可
props的功能
让组件接收外部传递的数据
- 传递数据
在使用组件标签的时候写入，如：
- 接收数据
- 简单声明接收
props: ['name', 'age', 'sex']
- 接收的同时对数据类型进行限制
props: {
name: String,
age: Number,
sex: String
}
- 更全面的设置：数据类型的限制+必要性的限制/默认值的设置
props: {
name: {
type: String,
required: true // 必传的选项
},
age: {
type: Number,
default: 18 // 非必传的选项，若没有传递此项数据，则默认值为18
},
sex: {
type: String,
required: true
}
}
注意：required和default不能一起出现
注意点
props是只读的，Vue底层会监测对props的修改。若进行修改，就会发出警告。如果业务需求确实需要修改props的数据，那么可以复制props的内容到data中，然后去修改以及渲染data中的数据
跋尾
本篇内容就到这里了~ 我是Zeus👩🏻🚀来自一个互联网底层组装员，下一篇再见！ 📖
