vue组件详解（四）——使用slot分发内容

2018-06-24 01:52:33来源：未知阅读 ()

一、什么是slot

在使用组件时，我们常常要像这样组合它们：

<app>
  <app-header></app-header>
  <app-footer></app-footer>
</app>

当需要让组件组合使用，混合父组件的内容与子组件的模板时，就会用到slot ，这个过程叫作内容分发（ transclusion ）。

注意两点：

1.< app＞组件不知道它的挂载点会有什么内容。挂载点的内容是由＜app ＞的父组件决定的。

2.<app> 组件很可能有它自己的模板。

props 传递数据、events 触发事件和slot 内容分发就构成了Vue 组件的3 个API 来源，再复杂的组件也是由这3 部分构成的。

二、作用域

<child-component>
  {{ message }}
</child-component>

这里的message 就是一个slot ，但是它绑定的是父组件的数据，而不是组件＜child-component>的数据。

父组件模板的内容是在父组件作用域内编译，子组件模板的内容是在子组件作用域内编译。如：

        <div id="app15">
            <child-component v-show="showChild"></child-component>
        </div>

Vue.component('child-component',{
    template: '<div>子组件</div>'
});

var app15 =  new Vue({
   el: '#app15',
   data: {
        showChild: true
    }
});

这里的状态showChild 绑定的是父组件的数据，如果想在子组件上绑定，那应该是：

       <div id="app15">
            <child-component></child-component>
        </div>

Vue.component('child-component',{
    template: '<div v-show="showChild">子组件</div>',
    data: function(){
        return {
            showChild: true
        }
    }
});

因此， slot 分发的内容，作用域是在父组件上的。

三、slot用法

3.1 单个slot

在子组件内使用特殊的＜slot>元素就可以为这个子组件开启一个slot（插槽），在父组件模板里，插入在子组件标签内的所有内容将替代子组件的<slot> 标签及它的内容。

        <div id="app16">
            <my-component16>
                <p>分发的内容</p>
                <p>更多分发的内容</p>
            </my-component16>
        </div>

Vue.component('my-component16',{
    template: '<div>' +
                '<slot><p>如果父组件没有插入内容，我将作为默认出现＜</p></slot>' +　　　　//预留的slot插槽
             '</div>'
});

var app16 =  new Vue({
    el: '#app16'
});

渲染结果为：

<div id=”app16”>
    <div>
        <p>分发的内容<p>
        <p>更多分发的内容<p>
    </div>
</div>

子组件child-component 的模板内定义了一个＜slot>元素，并且用一个＜p＞作为默认的内容，在父组件没有使用slot 时，会渲染这段默认的文本；如果写入了slot，那就会替换整个＜slot> 。

3.2具名slot

给＜slot> 元素指定一个name 后可以分发多个内容，具名Slot 可以与单个slot 共存。

        <div id="app17">
            <my-component17>
                <h3 slot="header">标题</h3>
                <p>正文内容</p>
                <p>更多正文内容</p>
                <h3 slot="footer">底部信息</h3>
            </my-component17>
        </div>

Vue.component('my-component17',{
    template: '<div class="container">' +
                 '<div class="header">' +
                    '<slot name="header"></slot>' +
                 '</div>' +
                 '<div class="main">' +
                    '<slot></slot>' +
                 '</div>'+
                 '<div class="footer">' +
                    '<slot name="footer"></slot>' +
                 '</div>'+
              '</div>'
});

var app17 =  new Vue({
    el: '#app17'
});

渲染结果为：

            <div id="app17">
                <div class="container">
                    <div class="header">
                        <h3>标题</h3></div>
                    <div class="main"> 
                        <p>正文内容</p> 
                        <p>更多正文内容</p> 
                    </div>
                    <div class="footer">
                        <h3>底部信息</h3>
                    </div>
                </div>
            </div>

子组件内声明了3 个＜s lot>元素，其中在＜div class＝” main >内的＜slot> 没有使用name 特性，它将作为默认slot 出现，父组件没有使用slot 特性的元素与内容都将出现在这里。

如果没有指定默认的匿名slot ，父组件内多余的内容片段都将被抛弃。

四、作用域插槽

作用域插槽是一种特殊的slot ，使用一个可以复用的模板替换己渲染元素。

看一个例子：

        <div id="app18">
            <my-component18>
                <template scope="props">
                    <p>来自父组件的内容</p>
                    <p>{{props.msg}}</p>
                </template>
            </my-component18>
        </div>

Vue.component('my-component18',{
    template: '<div class="container"><slot msg="来自子组件的内容"></slot></div>'
});

var app18 =  new Vue({
    el: '#app18'
});

渲染结果为：

<div id=”app18”>
    <div class=”container”>
        <p>来组父组件的内容</p>
        <p>来自子组件的内容</p>
    </div>
</div>

观察子组件的模板，在<slot>元素上有一个类似props 传递数据给组件的写法msg＝” xxx ”，将数据传到了插槽。

父组件中使用了＜template＞元素，而且拥有一个scope＝”props ”的特性，这里的props只是一个临时变量，就像v-for= ” item in items 里面的item 一样，template 内可以通过临时变量props访问来自子组件插槽的数据msg 。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：【javascript】定时器组件

下一篇：ES6要点总结（4）-箭头函数=>

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签