What is the difference between mixin and component in vue

The difference between mixin and component: After the component is referenced, it is equivalent to opening up a separate space in the parent component to perform corresponding operations based on the values ​​​​from the parent component props. In essence, the two are still distinct. Relatively independent; after the component is introduced, mixins are equivalent to various attribute methods of the parent component that have been expanded, and the internal content of the component such as data and other methods, method and other attributes will be merged with the corresponding content of the parent component.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

What is Mixin?

Mixins are a very flexible way to distribute reusable functionality in Vue components.

Mixed objects can contain arbitrary component options.

When a component uses a mixin object, all the options of the mixin object will be mixed into the options of the component itself. [Related recommendations: vuejs video tutorial, web front-end development]

The difference between mixin and components

After the component is referenced, it is equivalent to opening up a separate space in the parent component to perform corresponding operations based on the values ​​​​from the parent component's props. In essence, the two are distinct and relatively independent.

After the component is introduced, mixins merge the internal content of the component such as data and other methods, method and other attributes with the corresponding content of the parent component. It is equivalent to that after the introduction, various property methods of the parent component have been expanded.

Simple component reference:

• Parent component sub-component>>> Parent component sub-component

mixins:

• Parent component Child component>>> new parent component

It’s a bit like registering a public method of vue that can be bound Used in multiple components or multiple Vue object instances. Another point is similar to registering a method in a prototype object. In an instance object, that is, a component or a Vue instance object, you can still define a method with the same function name to override it, which is a bit like a subclass and a parent class.

The difference between mixins and vuex

Mixins: You can define shared variables and use them in each component. After being introduced into the component, each variable are independent of each other, and value modifications will not affect each other in the component. If the object is the same, the component will overwrite mixins

vuex: used for state management. The variables defined in it can be used and modified in each component. After modifying the value of this variable in any component, other The value of this variable in the component will also be modified.

Use of mixins

1. First create a js file, such as elTableAdsorbent.js

export const elTableAdsorbent = {
  data() {
    return {
      count:10
    }
  },
  methods: {
    // 显示页面中所有内容
    handleCount() {
      this.count++
  }
}

or

// 定义一个混入对象
    var myMixin = {
        data(){
            return{
                parent: 405
            }
        },
        mounted: function () {
            this.hello()
        },
        methods: {
            hello: function () {
                console.log(this.parent, 'hello from mixin!')
            }
        }
    }

2. Then introduce it into the vue page that requires this requirement and use

<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. The hook functions with the same name will be merged into an array, so they will all be called. Additionally, the hooks of the mixin object will be called before the component's own hooks.

var mixin = {
  created: function () {
    console.log('混入对象的钩子被调用')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('组件钩子被调用')
  }
})

// => "混入对象的钩子被调用"
// => "组件钩子被调用"

4. When the key names of two objects conflict, the key-value pair of the component object is taken.

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"

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

(Learning video sharing: vuejs introductory tutorial, Programming Basics Video)

The above is the detailed content of What is the difference between mixin and component in vue. For more information, please follow other related articles on the PHP Chinese website!