在 Vue 中是使用插槽

栏目: JavaScript · 发布时间: 5年前

内容简介:先写一段简单的代码这种写法有两个问题:当我的子组件有一部分内容,是根据父组件传递过来的

属性传值

先写一段简单的代码

<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 结构


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Linux多线程服务端编程

Linux多线程服务端编程

陈硕 / 电子工业出版社 / 2013-1-15 / 89.00元

本书主要讲述采用现代C++ 在x86-64 Linux 上编写多线程TCP 网络服务程序的主流常规技术,重点讲解一种适应性较强的多线程服务器的编程模型,即one loop per thread。这是在Linux 下以native 语言编写用户态高性能网络程序最成熟的模式,掌握之后可顺利地开发各类常见的服务端网络应用程序。本书以muduo 网络库为例,讲解这种编程模型的使用方法及注意事项。 本......一起来看看 《Linux多线程服务端编程》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换