Codewords are not easy, and helpful students hope to pay attention to my WeChat official account: Code Program Life, thanks!
In the development of the web front-end , the idea of componentization and modularization has been implementing the current technological development. One of the important functions of
components is reusability . After I encapsulate the components, I can reuse my components anywhere without the need for multiple development. As the saying goes, one package is used many times .
However , there are actually many functions that can be reused between components .
Let's take a simple example, a prompt box component and a modal box component. They are different in display form, but their trigger mechanism is basically the same. They all change the value of v-if through the appearance of trigger conditions to realize the display of components .
In other words, although there are logically repeated functions between their two components, they can be reused , thereby improving our development efficiency .
vue provides a set of reusable & composition of mixed technology lazy a mixin .
Why is it called lazy technology , because reuse is originally for "lazy", focusing more on effective operations and minimizing invalid operations .
Mixin provides a very flexible way to distribute reusable functions in Vue components. A mixin object can contain any component options. When a component uses a blended object, all the options of the blended object will be "blended" into the options of the component itself.
Let's first give a small example to show the use of mixin .
<div id="app">
{
{
msg}}
</div>
<script>
const myMixin = {
data () {
return {
msg:123
}
},
created () {
this.sayHello();
},
methods: {
sayHello(){
console.log('hello mixin');
}
}
}
new Vue({
el:'#app',
data:{
title:'Ray'
},
mixins: [myMixin],
});
</script>
We wrote a local component myMixin . In an instantiated vue, we wrote a mixins attribute at the same level as data , and put the name of the local component we wrote earlier in the form of an array . It can also be seen here that more than one component can be put in mixins, that is, we can put any component we want to reuse .
Then we look at the rendering of the page.
It successfully executed the methods and hook functions in myMixin .
This is the most basic use of mixin .
Here we have a development of actual cases , show how mixin use in actual development.
const toggleShow = {
data () {
return {
isShow:false
}
},
methods: {
toggleShow(){
console.log("点击！");
this.isShow = !this.isShow;
}
}
}
const Model = {
template:`
<div v-if='isShow'>
<h3>模态框组件</h3>
</div>
`,
// 局部的mixin
mixins: [toggleShow]
}
const Toast = {
template:`
<div v-if='isShow'>
<h2>提示框组件</h2>
</div>
`,
// 局部的mixin
mixins: [toggleShow]
}
new Vue({
el:'#app',
data:{
},
components: {
Model,
Toast
},
template:`
<div>
<button @click='handleModel'>模态框</button>
<button @click='handleToast'>提示框</button>
<Model ref='model'></Model>
<Toast ref='toast'></Toast>
</div>
`,
methods:{
handleModel(){
this.$refs.model.toggleShow();
},
handleToast(){
this.$refs.toast.toggleShow();
}
}
});
</script>
Now there is a partial component Model as a modal box , and a partial component Toast as a prompt box .
They look different, their usage is different, but the logic is the same , they are both to switch the boolean value of v-if .
Then we wrote a partial component toggleShow , this component is the component we reused repeatedly , used to provide the logic function of the modal box and the prompt box .
And we call this reused component through mixins: [toggleShow] in both Model and Toast .
Then we use these two components in an instantiated vue, and bind them with the ref attribute to call their toggleShow method to achieve the display effect .
Let's take a look at the actual rendering of the page:
there is no problem, after we click the button , the modal box and the prompt box have completed the corresponding display .
We realized from the toggleShow components in detached function , distribution to the Model and Toast effect components.
That's mixin in our practical work developed in use, is still very easy to use, can be components can be reused functions , continued pulled out and distribute to the required components.
There is a WeChat mini program course design, complete design needs, contact personal QQ: 505417246
Pay attention to the following WeChat public account, you can receive WeChat applet, Vue, TypeScript, front-end, uni-app, full stack, Nodejs, Python and other practical learning materials. The
latest and most complete front-end knowledge summary and project source code will be released to the WeChat public as soon as possible No., please pay attention, thank you!
