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. css 样式冲突问题

    CSS 样式冲突问题 问题: 当文件中样式名称相同时,易出现样式冲突问题,解决办法如下: 解决: 以 layer.js 中弹出层  .layui-layer-page .layui-layer-con ...

  2. 零基础学习Mahout之-----搭建单机环境

    一.Mahout是什么? Mahout是Apache的一个开源项目(http://mahout.apache.org/),提供了机器学习领域的若干经典算法,以便开发人员快速构建机器学习和数据挖掘方面的 ...

  3. xor和路径(codevs 2412)

    题目描述 Description 给定一个无向连通图,其节点编号为1到N,其边的权值为非负整数.试求出一条从1号节点到 N 号节点的路径,使得该路径上经过的边的权值的“XOR 和”最大.该路径可以重复 ...

  4. Codevs 搜索刷题 集合篇

    2919 选择题 时间限制: 1 s 空间限制: 16000 KB 题目等级 : 黄金 Gold 题目描述 Description 某同学考试,在N*M的答题卡上写了A,B,C,D四种答案. 他做完了 ...

  5. 鼠标放在预览图a.gif上，旁边有放大图出现

    原文发布时间为:2009-04-23 -- 来源于本人的百度文章 [由搬家工具导入] <html><script type="text/javascript"&g ...

  6. svn没有"对号"等符号

    [问题描述]调整svn建立好了服务端.安装客户端也检出成功了.但是就是没有对号符号. [解决方案]右键菜单,设置,里面有“图标覆盖”这个选项,把你的文件夹加入进去,然后注销windows用户重新登陆

  7. CAS统一认证系统学习

    Yale CAS(耶鲁集中认证服务)简介 http://www.5iops.com/html/2012/sso_0713/181.html 单点登陆框架CAS的研究 http://www.cnblog ...

  8. AndroidStudio不重新运行，Debug调试已有进程

    们在使用AndroidStudio进行编写Android应用程序的时候,经常需要对抛出的问题进行断点调试跟踪,如果不知道怎样直接调试已经运行的进程.那么调试的效率会非常低下!下面我就来教大家如何快速调 ...

  9. 关于WEB页面的强制分页打印问题

    最近项目中有个需求要求打印web页面数据,但是碰到打印预览显示数据时,多的数据就不翼而飞了(不分页),搞的很是焦灼~ 最先是以为纸张的问题,胡乱折腾了一番,把A4约硬是改成了LARGE号的纸,多的数据 ...

  10. Ansible进阶之企业级应用

    1.环境 cat /etc/hosts 127.0.0.1 localhost localhost.localdomain localhost4 localhost4.localdomain4 ::1 ...