作用域

在介绍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. 2.5if语句

    判断(if)语句 目标 开发中的应用场景 if 语句体验 if 语句进阶 综合应用 01. 开发中的应用场景 生活中的判断几乎是无所不在的,我们每天都在做各种各样的选择,如果这样?如果那样?-- 程序 ...

  2. C语言函数sscanf()的用法-(转自Walter L)

    在我的学习过程中,从文件读取数据是一件很麻烦的事,所幸有sscanf()函数. C语言函数sscanf()的用法sscanf() - 从一个字符串中读进与指定格式相符的数据. 函数原型: int ss ...

  3. 9.1 ps：查看进程

    ps命令 用于列出执行ps命令的那个时刻的进程快照,就像用手机给进程照了一张照片.如果想要动态地显示进程的信息,就需要使用top命令,该命令类似于把手机切换成录像模式.因为ps命令的功能实在是太多了, ...

  4. Docker Registry 简化版

    目录 Docker Registry 为什么要使用Registry 依赖 启动 Configuring a registry 配置认证 Docker Registry https://docs.doc ...

  5. Systemverilog MCDF寄存器描述

    前三个寄存器是读写寄存器(控制寄存器) (一)地址0x00 :32bit bit[0]通道使能,1打开,0关闭.复位1. bit[2:1]优先级,0最高 bit[5:3]数据包长度,是解码对应的. 0 ...

  6. TVM性能评估分析（七）

    TVM性能评估分析(七) Figure 1.  Performance Improvement Figure 2.  Depthwise convolution Figure 3.  Data Fus ...

  7. 基于TensorRT 3的自动驾驶快速INT8推理

    基于TensorRT 3的自动驾驶快速INT8推理 Fast INT8 Inference for Autonomous Vehicles with TensorRT 3 自主驾驶需要安全性,需要一种 ...

  8. HAL库与Cubemx系列|Systick-系统滴答定时器详解

    Systick是什么? 关于Systick,在Context-M3权威指南中如此描述: SysTick定时器被捆绑在NVIC中,用于产生SYSTICK异常(异常号: 15).在以前,大多操作系统需要一 ...

  9. C#搞跨平台UI，封装Cef作为Cpf的控件支持Windows，Linux，Mac

    终于封装完成了,采用离屏渲染方式,支持JS和C#互相调用,C#方法自动绑定到JS里,中文输入有自动调整输入法位置. 基于开源的CefGlue 移植,本来想用CefSharp,不过这个里面有很多C++的 ...

  10. 「JVM」知识点详解一：JVM运行原理详解

    前言 JVM 一直都是面试的必考点,大家都知道,但是要把它搞清楚又好像不是特别容易.JVM 的知识点太散,不系统,今天带大家详细的了解一下jvm的运行原理. 正文 1 什么是JVM? JVM是Java ...