Explain the inheritance and expansion of Vue2.0 components


This article describes the inheritance and extension of components in Vue 2.0, mainly sharing Slot, Mixins / Extends, and Extend usage.

1. Default slot and anonymous slot

SLOT To get the original content in the component, this manner is used to pass the “tag data” to the subcomponent. Sometimes it provides the default content for the slot, for example, one

Components may want this button's default content "If there is no original content, the content is displayed", but at the same time Allows users to overwrite as other content.

   Welcome to Xiamen 
Without the original content, the content is displayed // Default slot
VAR = new Vue ({EL: '# itany', Components: {'my-hello': {Template : '# hello'}}};

2. Table slots
Sometimes we need multiple slots,

Elements have a special feature: name. This feature can be used to define additional slots: 详解Vue2.0组件的继承与扩展



  • Welcome to Xiamen
  • VAR VM = New Vue ({EL: '# itany', Components: {'my-hello': {template: '# hello'}}});
  1. Second, MIXINS
1.Mixins Introduction
Mixins is a very flexible way of distributing multiple functions in the VUE component. Mixed objects can contain any component options. When the component is mixed into the object, all options for mixing the object will be mixed into the component itself. The Mixins option accepts an array of mixed objects.
2. Mixins Use

There are generally two uses: 1, after you have written the constructor, you need to increase the method or The method used in temporary activities, when mixing will reduce the pollution of source code.
2, a common method of many places, using mixed methods can reduce the amount of code, implement code reuse. For example, the following example: You can print a prompt at the console when each data change is realized: "Data changes"

MIXINS 详解Vue2.0组件的继承与扩展 Num: {{NUM}}

Increases the number

VAR addlog = {// Extra temporary joining, used to display log updated: function () {console.log (“data changes, change into” + this.num + “.”);}} Vue.Mixin ({// Globally register a mix, affecting all of the Vue instance updated after the registration: function () {console.log (“I am a global mix”)}}) var app = new Vue ({EL: ‘ #app ‘, DATA: {Num: 1}, methods: {add: function () {this.num ++;}}, updated () {console.log (“I am a native update”)}, mixins: [AddLog ] // Entry})

3. Call sequence of Mixins

Note: From the order of execution, the hook mixed into the object will be called before the component itself hook. If you encounter global mix (


), the overall mixed execution order is before mixing and Method in components.

Extends option allows declaration to expand another component without using
 Vue.extend . 

The constructor is extended by an external increase in the object. It is very similar to it mixed with Mixins. However, the received parameters are simple option objects or constructor, so ExtenDS can only extends a component once.


Num: {Num}}

var bbb = {updated () {console.log ("I am extended");}, methods: {add: function () {// conflict with native method, take the original method, This is mixed with mix.log ('I am expanded Add method!'); This.Num ++;}}}; var app = new Vue ({EL: '#app', data: {Num: 1 }, Methods: {add: function () {console.log ('I am a native add method'); this.num ++;}}, updated () {console.log ("I am extended");}, EXTENDS: BBB // Receive Object and Function})

详解Vue2.0组件的继承与扩展 From the above example, it can be seen that the execution has Like Mixins, additional methods are not effective when the method is for native conflicts, and this is the same as mixing.

2.Extends and Mixins priority comparisons

var extend = {data: {extendData: 'I am Extend DATA '}, created: function () {console.log (' This is extend's created ');}} var mixin = {data: {mixindata:' I am a mixin's Data '}, created: function () {Console .log ('This is a mixin's created');}} var VM = new Vue ({EL: '# app', data: {mixindata: 'I am a Vue instance Data'}, created: function () {Console .log ('This is the created' of the Vue instance);}, methods: {getSum: function () {console.log ('This is getsum method in the Vue instance');}}, mixins: [mixin], extends : extend}

Thereby, it can be concluded that the priority triggered relative to Mixins, Extends

Vue.extend just creates a constructor, which is to create a reused component. It is mainly used to serve Vue.component, used to generate components


/ ** * mode 1: Create a component constructor first, then create component * ///1 by the component constructor. Create a component constructor var mycomponent = vue.extend ({template: '"using Vue.extend (). ] HELLO World
'}; // 2. Use the Vue.Component, create component Vue.component (' Hello ', MyComponent) according to the component constructor; / ** * mode 2 : Create a component directly (recommended) * / // vue.component ('world', {vue.component ('my-world', {template: '
Hello, world

'}); var VM = New VUE ({// The VM here is also a component, called root component root el: '#ITANY', DATA: {}});

If there is a need for source code, please slam the source code
Reference article

VUE official document

The above is all the contents of this article, hope Everyone’s learning is helpful, I hope everyone supports Tumi Cloud.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment