Vue uses the reusable functionality of the mixin distribution component

The implementation of vue creating advanced components is not react-elegant enough, but that is caused by the design ideas of vue and react. In react, everything is a function, while in vue, components are ultimately functions, but they can be JSON objects during development. There are three points to pay attention to for each vue component: props, events and slots. These three causes vue to pass in corresponding attributes when creating higher-order components, which is more complicated than react.

vue officially recommends using mixins to complete the functions of advanced components. If you are interested in implementing advanced components, it is recommended to see [vue implementing advanced components][1]

The following is an example of using mixins on the official website of vue:

// Define a mixed objectvar myMixin = {
 created: function () {
  ()
 },
 methods: {
  hello: function () {
   ('hello from mixin!')
  }
 }
}

// Define a component that uses mixed objectsvar Component = ({
 mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

Each vue component has a mixins attribute to receive a mixin array, but because of the problem of attribute naming conflicts between mixin and component, mixin and mixin, the way vue solves this is:

1 The data object will be recursively merged internally, and component data will be preferred when conflict occurs.

2 Options with values ​​of objects, such as methods, components, and directives, will be merged into the same object. When the key names of two objects conflict, take the key-value pair of the component object.

3 () and new Vue() have the same solution to resolve the above naming conflict.

Summarize

The above is the reusable function of Vue using mixin distribution components introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message. The editor will reply to everyone in time!