**组件**
组件在引用之后相当于在父组件内开辟了一快单独的空间,来根据父组件props过来的值进行相应的操作
单本质上两者还是泾渭分明,相对独立
mixins
则是将组件内部的内容如data等方法,method等属性与父组件相应内容进行合并相当于在引入之后父组件的各种属性方法都被扩充了
单纯组件引用:
- 父组件 + 子组件 >>> 父组件 + 子组件
mixins:
- 父组件 + 子组件 >>> new父组件
**mixins和vuex区别**
Mixins:可以定义共用的变量,在每个组件中使用,引入组件中之后,各个变量是相互独立的,值的修改在组件中不会相互影响。如果相同对象,组件会覆盖mixins
vuex:用来做状态管理的,里面定义的变量在每个组件中均可以使用和修改,在任一组件中修改此变量的值之后,其他组件中此变量的值也会随之修改
mixin用法
mixins index.js
import imgError from '../assets/img-error.svg';
export default {
data() {return {}},
computed: {},
watch: {},
methods: {
handleError(source) {
this.$refs[source].src = imgError;
}
}
}
中间可用根级index.js过渡 npm link 缓存到C盘的全局node_modules里面 在需要使用的项目里面引入 npm link 项目名 在main.js中引入插件 去use一下
import imgError from "./src/mixins/imgError";
export {
imgError,
}