How to use vue mixins and extends

This time I will bring you how to use vue mixins and extends. What are the precautions when using vue mixins and extends. The following is a practical case. Let’s take a look. take a look.

vue provides mixins and extends configuration items, which I found very useful in recent use.

Mixing mixins and Inheritanceextends

Take a look at what the official documentation says. In fact, both can be understood as inheritance. Mixins receives objects arrays (can be understood as multiple inheritance), and extends receives objects or functions (can be understood as single inheritance).

Inherit hook function

const extend = {
 created () {
  console.log('extends created')
 }
}
const mixin1 = {
 created () {
  console.log('mixin1 created')
 }
}
const mixin2 = {
 created () {
  console.log('mixin2 created')
 }
}
export default {
 extends: extend,
 mixins: [mixin1, mixin2],
 name: 'app',
 created () {
  console.log('created')
 }
}

Console output

extends created
mixin1 created
mixin2 created
created

• Conclusion: The parent class inherited from mixins and extends is called first. The priority triggered by extends is higher, compared to the queue

• push(extend, mixin1, minxin2, its own hook function )

• After testing, the value inheritance rules of watch are the same.

Inherit methods

const extend = {
 data () {
  return {
   name: 'extend name'
  }
 }
}
const mixin1 = {
 data () {
  return {
   name: 'mixin1 name'
  }
 }
}
const mixin2 = {
 data () {
  return {
   name: 'mixin2 name'
  }
 }
}
// name = 'name'
export default {
 mixins: [mixin1, mixin2],
 extends: extend,
 name: 'app',
 data () {
  return {
   name: 'name'
  }
 }
}
// 只写出子类，name = 'mixin2 name'，extends优先级高会被mixins覆盖
export default {
 mixins: [mixin1, mixin2],
 extends: extend,
 name: 'app'
}
// 只写出子类，name = 'mixin1 name'，mixins后面继承会覆盖前面的
export default {
 mixins: [mixin2, mixin1],
 extends: extend,
 name: 'app'
}

• Conclusion: If the subclass declares again, the variables in data will be rewritten, whichever is the subclass.

• If the subclass is not declared, the variables in data will be based on the last inherited parent class.

• After testing, the properties in props, methods in methods and computed values ​​have the same inheritance rules.

The following introduces mixins, extends, and extend

separately. mixins

Calling method: mixins: [mixin1, mixin2]

It is an expansion of the parent component, including methods, components, directives, etc. . .

When the hook function is triggered, the function of the mixins is called first, and then the function of the parent component is called.

Although you can also add data and template attributes when creating a mixin, when the parent component also has this attribute, the parent will prevail. From this point, you can also see the producer's intention (expansion).

Objects in key-value format such as data, methods, components, and directives are based on the parent component/instance

extends

## Calling method: extends: CompA

It is also an expansion of the parent component, similar to mixins, but its priority is inferior to the parent component

extend

Constructor of extended component

Automatically called when we call vue.component('a', {...})

It is worth noting that the data in extend is a function

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

ajax request method in axios client

##vue.js vue-router improves user experience

The above is the detailed content of How to use vue mixins and extends. For more information, please follow other related articles on the PHP Chinese website!