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. iOS-绘制UIView之drawCGRect

    写在前面 UIView对于iOS开发来讲,再熟悉不过了.也正是因为这一点,我们可能会忽略UIView一些特有方法的理解和使用.今天,笔者主要整理一下对drawRect方法的理解和使用. 默认情况下,该 ...

  2. 修改host文件实现自定义域名和iis站点本地调试

    修改host文件实现自定义域名和iis站点本地调试 自定义域名:myhost.com windows版本:win7 iis版本:iis7.x vs版本:vs2010 现在开始动手设置了: 一.修改ho ...

  3. 【tmux】常用命令

    https://www.cnblogs.com/lizhang4/p/7325086.html 复制 prefix [ + vim风格选择复制 新建session tmux new -s name 为 ...

  4. Python之文件操作：经验总结

    1.怎么判断读出来的文件是gbk还是utf-8编码 if content == u'中国'.encode('gbk'):     return 'gbk' elif content == u'中国'. ...

  5. 在react当中巧用扩展运算符

    ...props可以把没有写到的属性补充完整 ...style 可以把style 属性在styles当中展开

  6. Linux下实现mysql数据库每天自动备份

    Linux下实现mysql数据库每天自动备份 1.基本操作步骤 a.创建备份目录 mkdir -m 777 /home/wwwroot/backup b.创建备份脚本sh vim /home/wwwr ...

  7. 【HDOJ5975】Aninteresting game（BIT原理）

    题意:给定n个区间,第i个区间的范围是[i-lowbit(i)+1,i].一共有q组询问,询问有两种: 1 x y:询问sigma lowbit(i) (x<=i<=y) 2.x:询问有几 ...

  8. updatepanel中使用alert弹出框方法

    原文发布时间为:2009-05-17 -- 来源于本人的百度文章 [由搬家工具导入]         ScriptManager.RegisterStartupScript(this.UpdatePa ...

  9. [LeetCode] Reverse Bits 位操作

    Reverse bits of a given 32 bits unsigned integer. For example, given input 43261596 (represented in ...

  10. [论文]A Link-Based Approach to the Cluster Ensemble Problem

    论文作者:Natthakan Iam-On, Tossapon Boongoen, Simon Garrett, and Chris Price 下次还是在汇报前先写了论文总结,不然有些点汇报时容易忘 ...