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. 【bzoj1803】Spoj1487 Query on a tree III DFS序+主席树

    题目描述 You are given a node-labeled rooted tree with n nodes. Define the query (x, k): Find the node w ...

  2. 如何在 Windows 7 上安装 TeX Live 2018

    $\color{red}{\mathsf{UPDATE}}$:见李阿玲在知乎专栏 All about TeXnique 发布的安装教程 关于 TeX Live:http://tug.org/texli ...

  3. Python爬虫教程-21-xpath

    本篇简单介绍 xpath 在python爬虫方面的使用,想要具体学习 xpath 可以到 w3school 查看 xpath 文档 Python爬虫教程-21-xpath 什么是 XPath? XPa ...

  4. Android注入完全剖析

    0 前沿 本文主要分析了一份实现Android注入的代码的技术细节,但是并不涉及ptrace相关的知识,所以读者如果不了解ptrace的话,最好先学习下ptrace原理再来阅读本文.首先,感谢源代码的 ...

  5. nginx和php安装文件

    #!/usr/bin/env bash echo "=============START=====================" ## php echo '[php]yum i ...

  6. Bzoj1879 [Sdoi2009]Bill的挑战

    Time Limit: 4 Sec  Memory Limit: 64 MBSubmit: 724  Solved: 363 Description Input 本题包含多组数据. 第一行:一个整数T ...

  7. 从数据库的表导出到Excel表格中【让客户端下载的Excel】

    原文发布时间为:2008-10-11 -- 来源于本人的百度文章 [由搬家工具导入] 这个例子是从gridview中导出到Excel，可以举一反三，可以直接从数据库中取值放在DataSet中，然后再从 ...

  8. Delphi 半透明窗体,窗体以及控件透明度

    很简单了 现在,适用所有控件和窗体: delphi设置窗口透明 form1.AlphaBlend :=true; //透明form1.AlphaBlendValue :=180; //透明度form1 ...

  9. LeetCode OJ--Copy List with Random Pointer **

    https://oj.leetcode.com/problems/copy-list-with-random-pointer/ 灵活的指针链表应用. 每个节点有两个指针next,random,对本链表 ...

  10. 网站安全测试工具GoLismero

    网站安全测试工具GoLismero GoLismero是一款开源的安全测试框架.目前,它的测试目标主要为网站.该框架采用插件模式,实现用户所需要的功能.GoLismero默认自带了导入.侦测.扫描.攻 ...