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

How to use mixins in vue? in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible way.

Define a common mixins file, such as mixin.vue

Export default {name: 'mixins-test-main', components: {}, props: {}, data () {return {mixinData:' variables in mixin'}} Methods: {mixinFunction () {return'I am the public method in mixins'},}, mounted () {}, computed: {}}

Second, call in your page: need the mixins file import, and then use it through mixins: ['filename'].

Call the mixin method

Import MixinItem from'. / mixin'

Export default {name: 'mixin-test-comp', props: {}, mixins: [MixinItem], components: {}, data () {return {}}, methods: {handleMixin () {console.log (' mixin-data=') This.mixinData) let mixfun = this.mixinFunction () console.log ('mixin-fun==== >', mixfun)},}, mounted () {}, computed: {}}

Third, let's talk about the characteristics of mixins:

1. Methods and parameters are not shared among components

For example, if there is a variable of cont:1 in the mixed object, change the value of the content in component A to 5. If you get this value in component B, you will still get 1, or the initial value mixed into the object. The data will not be shared.

2. Options with values of objects, such as methods,components, will be merged, and components with conflicting keys will override those mixed with objects. For example, there is a method An in the mixed object, and there is also method An in the component. If called in the component, the A method in the component is executed.

3. Options with values of functions, such as created,mounted, etc., will be called together, and the hook function in the mixed object will be called before the hook function in the component. In the same hook function, something mixed with the object will be executed first, and then the

Fourth, the difference from vuex

Vuex: used for state management, the variables defined can be used and modified in each component, and after the value of this variable is modified in any component, the value of this variable in other components will also be changed.

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

Fifth, the difference from public components

Component: introducing a component into the parent component is equivalent to giving a separate space in the parent component for the child component, and then passing the value according to the props, but the two are relatively independent in nature.

Mixins: merge with the objects and methods in the component after the introduction of the component, which is equivalent to extending the objects and methods of the parent component, which can be understood as the formation of a new component.

This is the answer to the question about how to use mixins in vue. I hope the above content can be of some help to you. If you still have a lot of doubts to solve, you can follow the industry information channel for more related knowledge.

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.