所属分类：web前端开发
mixin和组件的区别：组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立；而mixins在引入组件之后相当于父组件的各种属性方法都被扩充了，会将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。
本教程操作环境：windows7系统、vue3版，DELL G3电脑。
什么是Mixin？
混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。
混合对象可以包含任意组件选项。
当组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。【相关推荐：vuejs视频教程、web前端开发】
mixin和组件的区别
组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。
而mixins则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。
单纯组件引用：
父组件 + 子组件 >>> 父组件 + 子组件
mixins：
父组件 + 子组件 >>> new父组件
有点像注册了一个vue的公共方法，可以绑定在多个组件或者多个Vue对象实例中使用。另一点，类似于在原型对象中注册方法，实例对象即组件或者Vue实例对象中，仍然可以定义相同函数名的方法进行覆盖，有点像子类和父类的感觉。
mixins和vuex区别
Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。如果相同对象，组件会覆盖mixins
vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。
mixins的使用
1、首先创建一个js文件，例如elTableAdsorbent.js
微博登录
QQ登录export const elTableAdsorbent = {
data() {
return {
count:10
}
},
methods: {
// 显示页面中所有内容
handleCount() {
this.count++
}
}登录后复制或者
// 定义一个混入对象
var myMixin = {
data(){
return{
parent: 405
}
},
mounted: function () {
this.hello()
},
methods: {
hello: function () {
console.log(this.parent, 'hello from mixin!')
}
}
}登录后复制2、然后在需要此需求的vue页面引入并且使用
<el-button type="primary" @click="handleCount">{{count}}</el-button>
import { elTableAdsorbent } from '@/utils/mixin/elTableAdsorbent'
export default {
mixins: [elTableAdsorbent],
data() {
return {}
},
created(){},
methods:{},
watch:{}
}登录后复制3、同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
var mixin = {
created: function () {
console.log('混入对象的钩子被调用')
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log('组件钩子被调用')
}
})
// => "混入对象的钩子被调用"
// => "组件钩子被调用"登录后复制4、两个对象键名冲突时，取组件对象的键值对。
var mixin = {
methods: {
conflicting: function () {
console.log('from mixin')
}
}
}
var vm = new Vue({
mixins: [mixin],
methods: {
conflicting: function () {
console.log('from self')
}
}
})
vm.conflicting() // => "from self"登录后复制mixins的应用
var install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3. 注入组件
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (options) {
// 逻辑...
}
}登录后复制（学习视频分享：vuejs入门教程、编程基础视频）
以上就是vue中mixin和组件的区别是什么的详细内容，更多请关注zzsucai.com其它相关文章！
