Shulou(Shulou.com)06/03 Report--

This article is to share with you about how to use mixins in Vuejs. The editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

Hybrid provides distributed reuse for components in a flexible way. Blend objects can contain any component options. When a component uses a blended object, all options for the blended object are "blended" into the component's own options.

I. the basic usage of Mixins

Now that there is a program for increasing number clicks, assuming it has been completed, we want to be able to print a prompt on the console every time the data changes: "data has changed."

Code implementation process:

Num: {{num}}

Increase the quantity

Var addLog = {/ / mix updated hooks into the vue instance updated () {console.log ("data release changes to" + this.num + ".") }} var app = new Vue ({el:'# app', data: {num: 1}, methods: {add: function () {this.num++;}}, mixins: [addLog], / / blending})

The updated method in the mixed addLog is triggered when the button is clicked.

Second, the calling order of mixins

In terms of the order of execution, it is mixed to execute first, and then in the constructor.

Properties in data and methods in methods are overridden (constructor overrides mixed properties and methods)

The lifecycle hook will be called twice and will not be overwritten (call the blending hook first and then the constructor hook)

We also added the hook function of updated to the constructor of the above code:

Num: {{num}}

Increase the quantity

Var addLog = {updated: function () {console.log ("data release changes to" + this.num+ ".");}} var app = new Vue ({el:'# app', data: {num: 1}, methods: {add: function () {this.num++) }, updated: function () {console.log ("updated method in the constructor.") }, mixins: [addLog], / / mix})

Third, global blending mode

The execution order of global blending precedes the methods in the blending and constructor.

Num: {{num}}

Increase the quantity

Vue.mixin ({updated: function () {console.log ('I am globally mixed');}) var addLog = {updated: function () {console.log ("data release changes to" + this.num + ".") }} var app = new Vue ({el:'# app', data: {num: 1}, methods: {add: function () {this.num++;}}, updated: function () {console.log ("updated method in the constructor.") }, mixins: [addLog], / / mix})

Sequential summary: global blending > local blending > constructor

When the key names of two objects conflict, take the key-value pair of the component object

When there are test methods (with the same name) in both the mix and the component object, the final value takes the key-value pair of the component object

Num: {{num}}

Increase the quantity

Var addLog = {updated: function () {console.log ("data release changes to" + this.num + "."); this.test () }, methods: {test: function () {console.log ('mixed with test')} var app = new Vue ({el:' # app', data: {num: 1} Methods: {add: function () {this.num++ }, test:function () {console.log ('test' in component object)}}, mixins: [addLog], / / blending})

The above is how to use mixins in Vuejs. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.