Use of vue's mixin
- effect: After introducing the component, the contents inside the component such as methods, method, etc. are merged with the corresponding contents of the parent component. It is equivalent to after the introduction, the various attribute methods of the parent component have been expanded.
- Principles of access to data data: If the current component using mixin has the data or methods method, the data or methods of the current component are directly used, otherwise the data and methods within the mixin are directly inherited.
- Note: Common variables can be defined, used in each component. After being introduced into the component, each variable is independent of each other, and the modification of value will not affect each other in the component.
- Note 2: mixin is merged with objects and methods in the component after being introduced, which is equivalent to extending the data data and methods of the parent component, etc. It can be understood as forming a new component.
Data access in mixin
mixin /
export default {
data () {
return {
msg: "I'm an msg in the mixin"
}
},
created () {
},
mounted () { },
methods: {
}
}
- Using mixin in Home component
<template>
<div>
<div>home -- {{ msg }}</div> /* home modified msg */
</div>
</template>
<script>
import mixin from "@/mixin/";
export default {
name: "Home",
mixins: [mixin],
data() {
return { };
},
created() {
// Get the data data of mixin ("Print home", ); //home print it I am msg in mixin // Modify the data of the mixin = "home modified msg";
("Print home", ); // Home print the home modified msg },
methods: {
},
};
</script>
<style lang="scss" scoped>
</style>
<template>
<div>
<div>about2 -- {{ msg }}</div> /* about2 modified msg */
</div>
</template>
<script>
import mixin from "@/mixin/";
export default {
name: "About2",
mixins: [mixin],
components: {},
data() {
return {
msg: "Local msg",
};
},
created() {
("Print about 2", ); // Local msg = "about2 modified msg";
("Print about 2", ); // about2 modified msg // The last page shows the msg data modified by about2 on },
methods: {
},
};
</script>
<style lang="scss" scoped>
</style>
Methods and computed usage in mixin
mixin /
export default {
data () {
return {
msg: "I'm an msg in the mixin"
}
},
created () { },
mounted () { },
computed: {
UserName () {
return "I'm the UserName of the compute attribute";
},
},
methods: {
tipMsg () {
("TipMsg method in minxin", );
},
tipInfo (info) {
("tipInfo method in minxin", info);
}
}
}
<template>
<div>
<div>home --- msg-{{ msg }} UserName-{{ UserName }}</div>
/* home --- msg-home modified msg UserName-I am the UserName of the computed attribute */
</div>
</template>
<script>
import mixin from "@/mixin/";
export default {
name: "Home",
mixins: [mixin],
components: {},
data() {
return {};
},
created() {
// Get the data data of mixin ("Print home", ); //home print it I am msg in mixin // Modify the data of the mixin = "home modified msg";
("Print home", ); // Home print the home modified msg // Call the tipMsg method in the mixin (); // The tipMsg method in minxin home modified msg ("I'm a home's chicken info"); // tipInfo method in minxin I am home's chubby info },
methods: {},
};
</script>
<style lang="scss" scoped>
</style>
<template>
<div>
<div>about2 -- {{ msg }} UserName-{{ UserName }}</div>
/* about2 -- about2 modified msg UserName-I am the UserName of the computed attribute */
</div>
</template>
<script>
import mixin from "@/mixin/";
export default {
name: "About2",
mixins: [mixin],
components: {},
data() {
return {
msg: "Local msg",
};
},
created() {
("Print about 2", ); // Local msg = "about2 modified msg";
("Print about 2", ); // about2 modified msg // The last page shows the msg data modified by about2 on (); // Finally print -> I'm about2 local tipMsg method (); // The tipInfo method in minxin is undefined },
methods: {
tipMsg() {
("I'm about2 local tipMsg method");
},
},
};
</script>
Summarize
That’s all for this article. I hope it can help you and I hope you can pay more attention to more of my content!