脚本宝典收集整理的这篇文章主要介绍了

在 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'
})

这种写法有两个问题:

  1. p标签外面会有一层div,这个div是无法去掉的,有人会想,能不能用template代替,其实是不可以的,在这里模版站位符是不能用的。
  2. 如果content传递的内容很多,代码就会变得很难阅读。

当我的子组件有一部分内容,是根据父组件传递过来的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>

具名插槽

如果现在有个需求是,headerfooter是由外部引入的该怎么弄呢?如下

<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群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过