1、概述

内容分发：混合父组件的内容与子组件自己的模板。

2、单个插槽

当子组件模板只有一个没有属性的插槽时，父组件传入的整个内容片段将插入到插槽所在的 DOM 位置，并替换掉插槽标签本身。

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

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>vue 内容分发 slot</title>

    </head>

    <body>

        <div id="root">

            <div>

                <h1>我是父组件的标题</h1>

                <my-component>

                    <p>这是一些初始内容</p>

                    <p>这是更多的初始内容</p>

                </my-component>

            </div>

        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <script type="text/javascript">

            Vue.component('my-component', {

                template: `<div>

                  <h2>我是子组件的标题</h2>

                  <slot>

                    只有在没有要分发的内容时才会显示。

                  </slot>

                  <h2>子组件结束</h2>

                </div>`,

                data: function() {

                    return {

                    }

                }

            })

            new Vue({

                el: '#root',

                data: {

                    messages: ''

                }

            })

        </script>

    </body>

</html>

3、具名和匿名混合

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>vue 内容分发 slot</title>

    </head>

    <body>

        <div id="root">

            <app-layout>

                <h1 slot="header">这里可能是一个页面标题</h1>

                <p>主要内容的一个段落。</p>

                <p>另一个主要段落。</p>

                <p slot="footer">这里有一些联系信息</p>

            </app-layout>

        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <script type="text/javascript">

            Vue.component('app-layout', {

                template: `<div class="container">

                  <header>

                    <slot name="header"></slot>

                  </header>

                  <main>

                    <slot></slot>

                  </main>

                  <footer>

                    <slot name="footer"></slot>

                  </footer>

                </div>`,

                data: function() {

                    return {

                    }

                }

            })

            new Vue({

                el: '#root',

                data: {

                    messages: ''

                }

            })

        </script>

    </body>

</html>

Vue 内容分发slot的更多相关文章

  1. Vue内容分发slot

    前面的话 为了让组件可以组合,需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 “transclusion” ).Vue实现了一个内容分发 API,参照了当前 Web ...

  2. Vue一个案例引发「内容分发slot」的最全总结

    今天我们继续来说说 Vue,目前一直在自学 Vue 然后也开始做一个项目实战,我一直认为在实战中去发现问题然后解决问题的学习方式是最好的,所以我在学习一些 Vue 的理论之后,就开始自己利用业余时间做 ...

  3. 044——VUE中组件之使用内容分发slot构建bootstrap面板panel

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 玩转vue的slot内容分发

    vue的内容分发非常适合"固定部分+动态部分"的组件的场景,固定部分可以是结构固定,也可以是逻辑固定,比如下拉loading,下拉loading只是中间内容是动态的,而拉到底部都会 ...

  5. Vue slot插槽内容分发

    slot插槽使用 使用场景,一般父组件中又一大段模板内容需要运用到子组件上.或者更加复杂的,子组件需要运用到父组件大段模板内容,而子组件却不知道挂载的内容是什么.挂载点的内容是由父组件来决定的. Sl ...

  6. Vue中slot内容分发

    <slot>元素是一个内容分发API,使用多个内容插槽时可指定name属性 <!DOCTYPE html> <html> <head> <meta ...

  7. vue slot内容分发

    当需要让组件组合使用,混合父组件的内容和子组件的模板的时候,就会用到slot.这个过程就叫内容分发. 最为常用的是两种slot:一种是匿名slot, 一种是具名slot. 匿名 很好理解: 就是默认, ...

  8. vue.js之数据传递和数据分发slot

    一.组件间的数据传递 1.父组件获取子组件的数据 *子组件把自己的数据,发送到父级 *vm.$emit(事件名,数据); *v-on: @ 示例用法:当点击send按钮的时候,"111&qu ...

  9. slot内容分发

    vue实现了一套内容分发的API,这套API基于当前的web components规范草案,将<slot>元素作为承载分发内容的出口. 在前面的父子组件中,我们提到过,在vue中,组件实例 ...

随机推荐

  1. libcmt.lib和msvcrt.lib冲突，原因和解决方法

    libcmt.lib和msvcrt.lib冲突,原因和解决方法 https://blog.csdn.net/longlijun/article/details/7331093 libcmt.lib是w ...

  2. [CQOI2014][bzoj3504] 危桥 [最大流]

    题面 传送门 思路 这道题中惟一的特别之处,就在于"危桥"这一个只能走两次的东西 我的第一想法是做一个dp,但是这道题只需要能不能走,也没有必要 网络流?貌似是个很好的选择 我们把 ...

  3. linux系统初始化——sysinit文件写法详解

    sysinit文件写法详解 sysinit文件是linux初始化文件系统时执行的第一个脚本文件.它主要做在各个运行级别中进行初始化工作,包括: 启动交换分区;检查磁盘;设置主机名;检查并挂载文件系统; ...

  4. php中memcache扩展及memcached扩展的区别

    1.目前大多数php环境里使用的都是不带d的memcache版本,这个版本出的比较早,是一个原生版本,完全在php框架内开发的.与之对应的带d的memcached是建立在libmemcached的基础 ...

  5. 使用caffe测试自己的图片

    第一种方法是测试批量图片,使用caffe.bin即可,首先要做的是把你的jpg图片转换为LMDB的格式,如何转换呢?用/build/tools/convert_image --resize_width ...

  6. HDU 5696 RMQ+滑窗

    区间的价值 Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Subm ...

  7. redis在linux上的安装和配置

    https://blog.csdn.net/lzding/article/details/52040501(直接可以用的安装phpredis) http://www.runoob.com/redis/ ...

  8. CODEVS【3372】选学霸

    题目描述 Description 老师想从N名学生中选M人当学霸,但有K对人实力相当,如果实力相当的人中,一部分被选上,另一部分没有,同学们就会抗议.所以老师想请你帮他求出他该选多少学霸,才能既不让同 ...

  9. [论文]CA-Tree: A Hierarchical Structure for Efficient and Scalable Coassociation-Based Cluster Ensembles

    作者:Tsaipei Wang, Member, IEEE 发表:IEEE TRANSACTIONS ON SYSTEMS, MAN, AND CYBERNETICS—PART B: CYBERNET ...

  10. hdu 5972 Regular Number 字符串Shift-And算法 + bitset

    题目链接 题意 给定两个串\(S,T\),找出\(S\)中所有与\(T\)匹配的子串. 这里,\(T\)的每位上可以有若干(\(\leq 10\))种选择,匹配的含义是:对于\(S\)的子串的每一位, ...