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

In this issue, the editor will bring you about how to use mixin in vue. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

The use of mixin of vue

Function: after the introduction of the component, it is to merge the internal content of the component, such as data, method and other properties with the corresponding content of the parent component. After the introduction, the various property methods of the parent component have been extended.

Equal access principles for data data: if the current component of mixin has the data data or methods method, it directly uses the data or method of the current component, otherwise it directly inherits the data and methods within mixin.

Note: common variables can be defined and used in each component. After being introduced into the component, the variables are independent of each other, and the modification of values will not affect each other in the component.

Note that 2:mixin is merged with objects and methods in the component after the introduction of the component, which is equivalent to extending the data data and methods of the parent component, which can be understood as the formation of a new component.

Data data access in mixin mixin / index.jsexport default {data () {return {msg: "I am msg within mixin"}}, created () {}, mounted () {}, methods: {}} Home.vue

Using mixin in Home components

Home-- {{msg}} / * home modified msg * / import mixin from "@ / mixin/index.js"; export default {name: "Home", mixins: [mixin], data () {return {};}, created () {/ / take mixin data data console.log ("home print", this.msg) / / home print my msg / / modify mixin's data data this.msg = "home modified msg"; console.log ("home print", this.msg); / / home print home modified msg}, methods: {},}; About2.vue about2-{{msg}} / * about2 modified msg * / import mixin from "@ / mixin/index.js" Export default {name: "About2", mixins: [mixin], components: {}, data () {return {msg: "Local msg",};}, created () {console.log ("about2 print", this.msg); / / Local msg this.msg = "about2 modified msg"; console.log ("about2 print", this.msg) / / about2 modified msg / / the data of about2 modified msg displayed on the last page}, methods: {},} The methods method and computed in mixin use mixin / index.jsexport default {data () {return {msg: "I am the msg within mixin"}}, created () {}, mounted () {}, computed: {UserName () {return "I am the UserName of computed properties";},}, methods: {tipMsg () {console.log ("tipMsg method within minxin", this.msg) }, tipInfo (info) {console.log ("tipInfo method within minxin", info);}} Home.vue home-msg- {{msg}} UserName- {{UserName}} / * home-msg-home modified msg UserName- I am UserName * / import mixin from "@ / mixin/index.js" of the calculation attribute Export default {name: "Home", mixins: [mixin], components: {}, data () {return {};}, created () {/ / take the data data console.log of mixin ("home print", this.msg); / / home print it I am msg / / modify mixin data data this.msg = "home modified msg" in mixin Console.log ("home print", this.msg); / home print the home modified msg / / call the tipMsg method this.tipMsg () in mixin; / / the tipMsg method in minxin home modified msg this.tipInfo ("I'm home's vegetable chicken info"); / / the tipInfo method in minxin I am home's vegetable chicken info}, methods: {},} About2.vue about2-- {{msg}} UserName- {{UserName}} / * about2-- msg UserName- modified by about2 I am the UserName * / import mixin from "@ / mixin/index.js" of the calculation attribute; export default {name: "About2", mixins: [mixin], components: {}, data () {return {msg: "Local msg",} }, created () {console.log ("about2 print", this.msg); / / Local msg this.msg = "about2 modified msg"; console.log ("about2 print", this.msg); / / about2 modified msg / / about2 modified msg displayed on the last page this.tipMsg () / / finally print-> I am the local tipMsg method this.tipInfo () of about2; / / the tipInfo method undefined in minxin}, methods: {tipMsg () {console.log ("I am the local tipMsg method of about2");},},}. This is what the editor shares with you on how to use mixin in vue. If you happen to have similar doubts, please refer to the above analysis for understanding. If you want to know more about it, you are welcome to 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.