In the last section, we learned about the concept and purpose of slots , and demonstrated in detail the use of anonymous slots . Our task in this issue is named slots .
We can see the difference from the name, one is anonymous , the other is named .
We will not go into the details of the slot concept, but will directly demonstrate the named slot .
<div id="app">
<App></App>
</div>
<script>
Vue.component('MBtn',{
template:`
<button>
<slot name='login'></slot>
<slot name='submit'></slot>
<slot name='register'></slot>
</button>
`
})
const App = {
data () {
return {
title:'老爹'
}
},
template:`
<div>
<MBtn>
<template slot='login'>
<a href="#">登录</a>
</template>
</MBtn>
<m-btn>
<template slot='register'>
注册
</template>
</m-btn>
<MBtn>
<template slot='submit'>
提交
</template>
</MBtn>
</div>
`,
}
new Vue({
el:'#app',
data:{
},
components: {
App
}
});
</script>
The main difference between a named slot and an anonymous slot is the addition of a name attribute to the slot tag .
An exit without a name will have the implicit name "default".
In the example, as in the previous issue, we wrote a global component MBtn , which demonstrated three buttons , login, submit, and register , respectively, and wrote three name attributes , login, submit, and register .
Then, as usual, we wrote an App partial component . In the template the template , we call MBtn components at the same time, the internal insert a template label , we are in a write slot template properties on the label , the value of the property slot is to name the use of slots .
As long as it matches the name value of the slot tag, the content in the template will be inserted into this slot
Then one point, let us pay attention to that the order of writing template slots on the MBtn component is login, submit, register . When we call on the App component , the order is login, register, and submit. In what order is the page rendered? The order is login, register, and submit.
Obviously, the order of page rendering is the order of call.
That is to say, when we write the template slots , the order of the slots is not important, what is important is the order when calling.
You still need to pay attention to this detail. I once saw this problem in other people's accounts.
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!
