作用域

在介绍slot前，需要先知道一个概念：编译的作用域。比如父组件中有如下模板：

<child-component>

{{message}}

<child-component>

这里的message就是一个slot，但是它绑定的是父组件的数据，而不是组件< child-component >的数据。

父组件模板的内容是在父组件作用域内编译，子组件模板的内容是在子组件作用域内编译。

<div id="app">

<child-component v-show="showChild"></child-component>

</div>

<script>

Vue.component('child-component',{

template: '<div>子组件</div>'

});

var app = new Vue({

el: '#app',

data: {

showChild: true

}

});

</script>

这里的状态showChild绑定的是父组件的数据，如果想在子组件上绑定，那应该是：

<div id="app">

<child-component></child-component>

</div>

<script>

Vue.component('child-component',{

template: '<div v-show="showChild">子组件</div>',

data: function () {

showChild: true

}

});

var app = new Vue({

el: '#app'

});

</script>

因此，slot分发的内容，作用域是在父组件上的。

slot用法

单个slot：

在子组件使用特殊的< slot >元素就可以为这个子组件开启一个 slot（插槽），在父组件模板里，插入在子组件标签内的所有内容将替代子组件的< slot >标签及它的内容。

<!DOCTYPE html>

<html lang="en">

<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">

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<title>单个slot</title>

</head>

<body>

<div id="app">

<cild-component>

<p>分发的内容</p>

<p>更多分发的内容</p>

</cild-component>

</div>

<script>

Vue.component('child-component',{

template: '\

<div>\

<slot>\

<p>如果父组件没有插入内容，我将作为默认出现</p>\

</slot>\

</div>'

});

var app = new Vue({

el: '#app'

});

</script>

</body>

</html>

子组件child-component的模板内定义了一个< slot >元素，并且用一个< p >作为默认的内容，在父组件没有使用slot时，会渲染这段默认的文本；如果写入了slot，那就会替代整个< slot >标签。

上面示例渲染后的结果为：

<div id="app">

<div>

<p>分发的内容</p>

<p>更多分发的内容</p>

</div>

</div>

注意：子组件< slot >内的为备用内容，它的作用域是子组件本身。

具名slot：

给< slot >元素指定一个name后可以分发多个内容，具名slot可以与单个slot共存。

<div id="myApp">

<child-component>

<h2 slot="header">标题</h2>

<p>正文内容</p>

<p>更多的正文内容</p>

<div slot="footer">底部信息</div>

</child-component>

</div>

<script>

Vue.component('child-component',{

template: '\

<div class="container">\

<div class="header">\

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

</div>\

<div class="main">\

<slot></slot>\

</div>\

<div class="footer">\

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

</div>\

</div>'

});

var myApp = new Vue({

el: '#myApp'

});

</script>

子组件内声明了3个< slot >元素，其中在< div class=“main” > 内的 < slot >没有使用name特性，它将作为默认slot出现，父组件没有使用slot特性的元素与内容都将出现在这里。

如果没有制定默认的匿名slot，父组件内多于的内容片断都将被抛弃。

渲染结果：

<div class="container">

<div class="header">

<h2>标题</h2>

</div>

<div class="main">

<p>正文内容</p>

<p>更多的正文内容</p>

</div>

<div class="footer">

<div slot="footer">底部信息</div>

</div>

</div>

文章同步发布： https://www.geek-share.com/detail/2783995082.html

参考文章：

Vue.js 作用域、slot用法（单个slot、具名slot）的更多相关文章

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

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

  2. vue.js 常用指令用法

    v-if v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素. 如果v-if表达式赋值为false,那么对应的元素就会从DOM中移除: 否则,对应元素的一个克隆将被重新插入DOM中,代码如 ...

  3. vue.js 中slot 用处大（转载）

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...

  4. 关于vue.js中slot的理解

    slot这块看官网文档,起初有点不懂,仔细研究还是最终理解了,slot是用来干嘛的呢,先看下一个例子: <script src="https://unpkg.com/vue/dist/ ...

  5. vue组件详解（四）——使用slot分发内容

    一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer>& ...

  6. vue.js 精学组件记录

    组件需要注册后才可以使用. Vue.component('my-component',{ template:'<div>这是组件内容</div>' }): 局部注册组件 var ...

  7. Vue.js+vue-element搭建属于自己的后台管理模板：更深入了解Vue.js（三）

    前言 上一章我们介绍了关于Vue实例中一些基本用法,但是组件.自定义指令.Render函数这些放到了本章来介绍,原因是它们要比前面讲的要难一些,组件是Vue.js最核心的功能,学习使用组件也是必不可少 ...

  8. vue.js学习之组件（下篇）

    本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...

  9. Vue.js 的精髓——组件

    开篇:Vue.js 的精髓——组件 写在前面 Vue.js,无疑是当下最火热的前端框架 Almost,而 Vue.js 最精髓的,正是它的组件与组件化.写一个 Vue 工程,也就是在写一个个的组件. ...

随机推荐

  1. 网上的说TB6560存在的问题

    https://www.amobbs.com/thread-5506456-2-1.html

  2. 10.14 ssh：安全地远程登录主机

    ssh命令 是openssh套件中的客户端连接工具,可以使用ssh加密协议实现安全的远程登录服务器,实现对服务器的远程管理,Windows中的替代工具为Xshell.putty.SecureCRT等. ...

  3. tar压缩文件 .tar.gz

    打包并压缩文件 tar -zcf ansible.tar.gz ansible/* z    gzip属性 c    建立压缩文件 f    指定文件名 v    显示过程 解压文件 tar xzf ...

  4. Linux 中的 守护进程

    什么是守护进程 脱离控制终端的,运行于后端的进程,由系统管理的,按计划自动启动/停止/重启,用以执行特定的任务. 为什么要有守护进程? 在某些需求场景下,我们希望某项系统任务能够按计划按预期,始终/自 ...

  5. 扩展LLVM：添加指令、内部函数、类型等

    扩展LLVM:添加指令.内部函数.类型等 Introduction and Warning Adding a new intrinsic function Adding a new instructi ...

  6. springMVC异常处理（自定义异常）HandlerExceptionResolver

    注:本篇的异常主要指的是controller.service和dao层中执行方法抛出的异常. 一.为什么要处理异常? 因为如果我们不处理异常,异常信息就会直接抛出给浏览器,于是浏览器页面就直接显示异常 ...

  7. Python跨域问题解决集合

    Flask 安装插件 pip install flask-cors 使用 CORS函数配置全局路由 from flask_cors import * app = Flask(__name__) COR ...

  8. Spring Boot WebFlux-04——WebFlux 整合 Thymeleaf

    第04课:WebFlux 整合 Thymeleaf 上一篇介绍的是用 MongoDB 来实现 WebFlux 对数据源的操作,那么有了数据需要渲染到前台给用户展示,这就是本文关心的 View 层,Vi ...

  9. 点分治&cdq分治 总结

    游荡的孤高灵魂不需要羁绊之处. 洛谷题单 点分治 前置芝士 树的重心 树分治 例题略解 P3806 [模板]点分治1 板子题,先暴力找到整棵树的重心,然后先求出重心到各点的距离,进而算出他所在树的各个 ...

  10. 【模板】 RMQ求区间最值

    RMQ RMQ简单来说就是求区间的最大值(最小值) 核心算法:动态规划 RMQ(以下以求最大值为例) F[i,j]表示 从 i 开始 到i+2j -1这个区间中的最大值 状态转移方程 F[i,j]=m ...