vue中mixin和组件的区别有哪些

这篇文章主要介绍“Vue中mixin和组件的区别有哪些”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue中mixin和组件的区别有哪些”文章能帮助大家解决问题。

mixin和组件的区别：组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立；而mixins在引入组件之后相当于父组件的各种属性方法都被扩充了，会将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。

什么是Mixin？

混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。

混合对象可以包含任意组件选项。

当组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。

mixin和组件的区别

组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。

而mixins则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。

单纯组件引用：

• 父组件 + 子组件 >>> 父组件 + 子组件

mixins：

• 父组件 + 子组件 >>> new父组件

有点像注册了一个vue的公共方法，可以绑定在多个组件或者多个Vue对象实例中使用。另一点，类似于在原型对象中注册方法，实例对象即组件或者Vue实例对象中，仍然可以定义相同函数名的方法进行覆盖，有点像子类和父类的感觉。

mixins和vuex区别

Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。如果相同对象，组件会覆盖mixins

vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。

mixins的使用

首先创建一个js文件，例如elTableAdsorbent.js

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!')            }        }    }

然后在需要此需求的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:{}}

同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

var mixin = {  created: function () {    console.log('混入对象的钩子被调用')  }}new Vue({  mixins: [mixin],  created: function () {    console.log('组件钩子被调用')  }})// => "混入对象的钩子被调用"// => "组件钩子被调用"

两个对象键名冲突时，取组件对象的键值对。

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) {    // 逻辑...  }}

关于“vue中mixin和组件的区别有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网精选频道，小编每天都会为大家更新不同的知识点。