vue之插槽(slot)

关于slot是这样说的, 除非子组件模板包含至少一个 slot 插口,否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的 slot 时,父组件整个内容片段将插入到 slot 所在的 DOM 位置,并替换掉 slot 标签本身。

最初在 slot 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容。

单个 Slot

在子组件内使用特殊的slot元素就可以为这个子组件添加一个 slot (插槽),在父组件模板里,插入在子组件标签内的所有内容将替代子组件的slot标签及它的内容.示例代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>示例</title>

</head>
<body>

  <div id="app">
    <child-component>
      <p>分发的内容</p>
      <p>更多分发的内容</p>
    </child-component>
  </div>

  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

  <script>

    Vue.component('child-component', {
      template: '\
      <div>\
        <slot>\
          <p>如果父组件没用插入内容,我将作为默认出现</p>\
        </slot>\
      </div>'
    });

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

  </script>

</body>
</html>

子组件 child-component 的模板内定义一个 slot 元素,并且用一个

作为默认的内容,在父组件没有使用 slot 时, 会渲染这段默认的文本;如果写入了 slot ,那就会替换整个 slot.所以上列渲染后的结果为:

<div id="app">
   <div>
    <p>分发的内容</p>
    <p>更多分发的内容</p>
  </div>
</div>

注意:子组件slot内的备用内容,它的作用域时子组件本身.

具名 Slot

给 slot 元素指定一个 name 后可以分发多个内容,具名 Slot 可以与单个 Slot 共存,例如下面的示例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>示例</title>

</head>
<body>

  <div id="app">
    <child-component>
      <h2 slot="header">标题</h2>
      <p>正文内容</p>
      <p>更多正文内容</p>
      <div slot="footer">底部信息</div>
    </child-component>
  </div>

  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

  <script>

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

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

  </script>

</body>
</html>

子组件内声明了3个 slot 元素,其中在

内的slot 没用使用 name 特性,它将作为默认 slot 出现,父组件没有使用 slot 特性的元素与内容都将出现在这里. 如果没有指定默认的匿名 slot, 父组件内多余的内容片段都将被抛弃. 上例最终渲染后的结果为:

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

在组合使用组件时,内容分发API至关重要.

作用域插槽

说白了就是我在组件上的属性,可以在组件元素内使用!

先看一个最简单的例子!!

我们给slot元素上定义一个属性say(随便定义的!),接下来在使用组件child,然后在template元素上添加属性slot-scope!!随便起个名字a

我们把a打印一下发现是 {"say" : "你好"},也就是slot上面的属性和值组成的键值对!!!

这就是作用域插槽!

<div id="app">
    <child>
        <template slot-scope="a">
      <!-- {"say":"你好"} -->

            {{a}}
        </template>
    </child>
</div>
<script>
    Vue.component('child',{
        template:`
            <div>
                <slot say="你好"></slot>
            </div>
        `
    })

    let vm = new Vue({
        el:'#app',
        data:{

        }
    })
</script>

再看一下下面的例子:

<div id="app">
    <child :lists="nameList">
        <template slot-scope="a">
            {{a}}
        </template>
    </child>
</div>
<script>
    Vue.component('child',{
        props:['lists'],
        template:`
            <div>
                <ul>
                    <li v-for="list in lists">
                        <slot :bbbbb="list"></slot>
                    </li>
                </ul>
            </div>
        `
    })

    let vm = new Vue({
        el:'#app',
        data:{
            nameList:[
            {id:1,name:'孙悟空'},
            {id:2,name:'猪八戒'},
            {id:3,name:'沙和尚'},
            {id:4,name:'唐僧'},
            {id:5,name:'小白龙'},
            ]
        }
    })
</script>

输出结果:

当id等于1的时候,我前面加个你好。

我可以随便根据这个对象的属性值进行操作!

<child :lists="nameList">
    <template slot-scope="a">
        <div v-if='a.bbbbb.id==1'>你好:<span>{{a.bbbbb.name}}</span></div>
        <div v-else>{{a.bbbbb.name}}</div>
    </template>
</child>

如果用过elementui的同学,一定知道表格就是这样来的!!

本文分享自微信公众号 - 开发架构二三事(gh_d6f166e26398),作者:整理 两个小灰象

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue之组件边界情况处理

    在绝大多数情况下,我们最好不要触达另一个组件实例内部或手动操作 DOM 元素。不过也确实在一些情况下做这些事情是合适的。

    开发架构二三事
  • vue之vue-router实例

    本文转自: https://www.cnblogs.com/SamWeb/p/6610733.html

    开发架构二三事
  • vue之router文档

    查看 dist 目录. 注意,dist 目录下的文件是最新稳定版,不会同步更新到 dev 分支上的最新代码

    开发架构二三事
  • 老雷uniApp教程之自定义组件

    Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性。

    老雷PHP全栈开发
  • 「React 基础」函数组件及Hooks特性简介

    大家好,在前面的几篇相关文章里,我们一起学习了如何使用类的方式声明组件,以及如何属性传值和处理本地数据状态,本篇文章我们一起学习如何使用函数的方式进行声明组件。

    前端达人
  • 「React 手册 」如何创建函数组件?

    大家好,在前面的几篇相关文章里,我们一起学习了如何使用类的方式声明组件,以及如何属性传值和处理本地数据状态,本篇文章我们一起学习如何使用函数的方式进行声明组件。

    前端达人
  • 积木系统,将运营系统做到极致

    本文作者:IMWeb 江源 原文出处:IMWeb社区 未经同意,禁止转载 积木系统上线半年,取得了些成绩,也暴露出不少问题,加上 2.0 版本也准备开...

    IMWeb前端团队
  • React Hooks 原理与最佳实践

    React Hooks 是 React 16.8 引入的新特性,允许我们在不使用 Class 的前提下使用 state 和其他特性。React Hooks 要解...

    前端劝退师
  • http response code 301 和 302,你懂吗

    一.官方说法 301,302 都是HTTP状态的编码,都代表着某个URL发生了转移,不同之处在于: 301 redirect: 301 代表永久性转移(Per...

    后端技术探索
  • http response code 301 和 302,你懂吗

    一.官方说法 301,302 都是HTTP状态的编码,都代表着某个URL发生了转移,不同之处在于: 301 redirect: 301 代表永久性转移(Per...

    后端技术探索

扫码关注云+社区

领取腾讯云代金券