slot slot
First, the role / concept
Advance content to be used in future be reserved
<body>
<div id="app">
<Hello>
<div>
这里是1903
</div>
</Hello>
</div>
<template id="hello">
<div>
<slot></slot>
<h3>这里是hello</h3>
</div>
</template>
</body>
<script>
Vue.component('Hello',{
template: '#hello'
})
new Vue({
el: '#app'
})
</script>
Second, named slots: slot to a name
Vue2.6 previous version written (old):
<body>
<div id="app">
<Hello>
<header slot = 'header'> 这里是头部 </header>
<footer slot = 'footer'> 这里是底部 </footer>
</Hello>
</div>
<template id="hello">
<div>
<slot name = "header"></slot>
<h3>这里是hello</h3>
<slot name = "footer"></slot>
</div>
</template>
</body>
<script>
Vue.component('Hello',{
template: '#hello'
})
new Vue({
el: '#app'
})
</script>
- Note: in the above two forms is discarded vue2.6 above, after use vue2.6 v-slot version of the instruction is
- Why use v-slot command to replace it?
- Unified through the slot named slot and scope
- The concept of instructions: To these two properties with vue logo, and meet one of the two largest properties vue
Written after Vue2.6 version (new):
<body>
<div id="app">
<Hello>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
</Hello>
</div>
<template id ='hello'>
<div class="container">
<header>
<!-- 我们希望把页头放这里 -->
<slot name = "header"></slot>
</header>
<main>
<!-- 我们希望把主要内容放这里 -->
</main>
<footer>
<!-- 我们希望把页脚放这里 -->
<slot name = 'footer'></slot>
</footer>
</div>
</template>
</body>
<script>
Vue.component('Hello',{
template: '#hello'
})
new Vue({
el: '#app',
data: {
msg: '<h3> hello 1903</h3>'
}
})
</script>
Third, the scope of slots
1.旧： slot-scope
- manual
- Writing in the template slot socket assembly, and the current data component by v-bind the label bound to the slot
- When the assembly is used, = "slotProp" tag body to receive the data slot by slot-scope binding
- By slotProp.xxx can be used
<body>
<div id="app">
<Hello>
<template slot = "default" slot-scope = "slotProp">
<p> {{ slotProp.msg }} </p>
</template>
</Hello>
</div>
<template id="hello">
<div>
<slot name = "default" :msg = "msg"></slot>
</div>
</template>
</body>
<script>
Vue.component('Hello',{
template: '#hello',
data () {
return {
msg: 'hello'
}
}
})
new Vue({
el: '#app'
})
</script>
2.新：v-slot
<body>
<div id="app">
<Hello>
<template v-slot:default = "slotProp">
{{ slotProp.msg }}
</template>
</Hello>
</div>
<template id="hello">
<div>
<slot name = "default" :msg = "msg"></slot>
</div>
</template>
</body>
<script>
new Vue({
components: {
'Hello': {
template: '#hello',
data () {
return {
msg: 'hello'
}
}
}
}
}).$mount('#app')
</script>