We have already talked about various knowledge of components in previous issues .
Next we learn slot content, the slot is to expand the content Vue component-based development .
The official document explains the role of the slot: a set of APIs for distributing content implemented in vue, using the slot element as the export for carrying content.
To put it in plain language : If you want to add new content to a component tag, you must declare a slot element in the component, otherwise, the added new content will not be rendered .
Usually we will encapsulate various common functions separately in Vue for reuse later, but sometimes the components that need to be reused are not a perfect fit. At this time, we need to use slots, and slots can allow users to expand Components, better realize the reuse of components.
Next, we use a simple example to implement anonymous slots .
We now imagine a business scenario. We are currently working on a login and registration page. The login and registration page will have many buttons. When we develop components, if we develop components as before, what problems will we encounter?
If we have to make two buttons, one for login and one for registration, and componentized development, their basic content structure is very similar. Should we develop two components?
Obviously it is too bulky and goes against the original intention of component development. Slots
will be used at this time .
<div id="app">
<App></App>
</div>
<script>
Vue.component('MBtn',{
template:`
<button>
<slot></slot>
</button>
`
})
const App = {
data () {
return {
title:'老爹'
}
},
template:`
<div>
<MBtn><a href="#">登录</a></MBtn>
<MBtn>注册</MBtn>
</div>
`,
}
new Vue({
el:'#app',
data:{
},
components: {
App
}
});
</script>
We wrote a global component MBtn , which is a button.
In the template, we should pay special attention to one point. In the simple button tag, I wrote a slot tag , which is an anonymous slot .
Then we use this MBtn global button component in the local component App .
What are the benefits of slots?
We can write what we need inside this component when we use it.
This is what we mentioned earlier registration and login , as if no slots, then there is no way to solve this problem directly at the level of not using JS .
Take a look at the content in the template template of the App partial component . We have used this MBtn component twice , in which we can nest whatever we want to write .
In this way, we only need to use one component to develop the registration and login buttons separately.
Is it very convenient?
There may be many, many buttons on a page . If we don't use slots , we can't arbitrarily nest the content we want to use, which is very rigid .
In fact, the slot can be simply understood as, I have left a place there, I have not yet decided what to put, but I have to occupy it first, wait for I want to put something, and put it at any time .
There are many types of slots . In this issue, we will temporarily understand the content of anonymous slots , and the subsequent content will continue to be updated.
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!
