脚本宝典收集整理的这篇文章主要介绍了在 Vue 中是使用插槽,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
先写一段简单的代码
<div id="root">
<child content="<p>Dell</p>"></child>
</div>
Vue.component('child', {
props: {
content:String
},
template: `<div>
<p>hello</p>
<div v-html="this.content"></div>
</div>`,
})
let vm = new Vue({
el: '#root'
})
这种写法有两个问题:
当我的子组件有一部分内容,是根据父组件传递过来的dom
进行显示的话,这时候可以换一种语法。
slot
<div id="root">
<child>
<p>Dell</p> //这种语法看起来非常像,用子组件,我向里插入内容
</child>
</div>
Vue.component('child', {
props: {
content:String
},
template: `<div>
<p>hello</p>
<slot></slot> //slot 标签显示的内容就是父组件向子组件插入进来的内容
</div>`,
})
let vm = new Vue({
el: '#root'
})
<p>Dell</p>
这种语法看起来非常像,用子组我向里插入内容,所以我们把它叫做插槽。
slot
标签显示的内容就是父组件向子组件插入进来的内容。
通过插槽可以更方便的向子组件传递dom
元素,同时子组件只需通过slot
来使用就可以了。
slot
其他功能如果子组件里没有dom
元素,可以让它显示默认内容,如下:
<slot>默认内容</slot>
如果现在有个需求是,header
和footer
是由外部引入的该怎么弄呢?如下
<div id="root">
<body-content>
<div class="header" slot="header">header</div>
<div class="footer" slot="footer">footer</div>
</body-content>
</div>
Vue.component('body-content', {
props: {
content:String
},
template: `<div>
<slot name="header"></slot>
<div class="content">content</p>
<slot name="footer"></slot>
</div>`,
})
let vm = new Vue({
el: '#root'
})
slot
标签name
属性对应的是组件中slot
属性,通过这种写法,可以在调用子组件时,一次性传递多个区域的dom
结构,在子组件里通过具名插槽来分别使用不同部分的dom
结构
以上是脚本宝典为你收集整理的在 Vue 中是使用插槽全部内容,希望文章能够帮你解决在 Vue 中是使用插槽所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。