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. myeclipse搭建activemq 简单聊天

    需要一起交流的请加群qq:200634530

  2. POJ3678 Katu Puzzle 【2-sat】

    题目 Katu Puzzle is presented as a directed graph G(V, E) with each edge e(a, b) labeled by a boolean ...

  3. css 两列自适应布局的4种思路

    前面的话 前面已经介绍过css 两列布局中单列定宽单列自适应布局的6种思路的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式.本文将从float.table.flex和gri ...

  4. 【09】node 之 fs流读写

    前面我们已经学习了如何使用fs模块中的readFile方法.readFileSync方法读取文件中内容,及如何使用fs模块中的writeFile方法.writeFileSync方法向一个文件写入内容. ...

  5. 洛谷 P1653 == COGS 2043 猴子

    P2107 可爱的猴子 时间限制:1000MS  空间限制:65535KB 问题描述: 树上有n只猴子.它们编号为 1 到n.1 号猴子用它的尾巴勾着树枝.剩下的猴子都被其他的猴子用手抓着.每只猴子的 ...

  6. Docker(七)：仓库

    登录 可以通过执行docker login命令来输入用户名和密码,密码和邮箱来完成注册和登录.注册成功之后,本地用户目录的.dockerfig中将保存用户的认证信息. 使用$sudo docker s ...

  7. 老郭带你学数据结构（C语言系列）1-线性表之静态顺序表

    在学习之前,先说下我的软件情况,操作系统是manjaro linux 今天刚刚升级的,编辑器是vim8.0.55,编译器是gcc 6.2.1,调试器是gdb 7.12,版本再低点也可以,只要gcc版本 ...

  8. github 获取repo 发布的版本号

    获取最新版本 https://api.github.com/repos/nickchou/paopao/releases/latest 获取版本列表 https://api.github.com/re ...

  9. springmvc4.2.X fastjson 替换引用配置

    <mvc:annotation-driven> <mvc:message-converters register-defaults="true"> < ...

  10. LOJ N！在不同进制的位数

    lightoj1045 - Digits of Factorial (N!不同进制的位数) 对于一个B进制的数,只需要对其取以B的对数就可以得到他在B进制情况下的位数(取了对数之后可能为小数,所以还需 ...