作用域

在介绍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. WEB页面下载内容导出excel

    internal class DownloadHandler : IDownloadHandler    {        public DownloadHandler()        {      ...

  2. 国内镜像源 sources

    Ubuntu18.04源 cat > /etc/apt/sources.list <<eof # 默认注释了源码镜像以提高 apt update 速度,如有需要可自行取消注释 deb ...

  3. JMeter逻辑控制器完整介绍

    JMeter逻辑控制器可以对元件的执行逻辑进行控制,就像编程一样,实现业务需求. JMeter包括了以下逻辑控制器: 一共17种.除了仅一次控制器外,其他控制器下可以嵌套别的种类的逻辑控制器. If ...

  4. redis 记一次搭建高可用redis集群过程,问题解决;Node 192.168.184.133:8001 is not configured as a cluster node

    ------------恢复内容开始------------ 步骤 1:每台redis服务器启动之后,需要将这几台redis关联起来, 2: 关联命令启动之后 报错: Node 192.168.184 ...

  5. NX二次开发-曲线或边分析函数

    UF_EVAL_is_arc   判断是圆形曲线或边UF_EVAL_ask_arc 圆形曲线或边分析,得到曲线或边的信息 类似的函数还有以下这些: UF_EVAL_is_ellipse // 椭圆UF ...

  6. 详解Apache Dubbo的SPI实现机制

    一.SPI SPI全称为Service Provider Interface,对应中文为服务发现机制.SPI类似一种可插拔机制,首先需要定义一个接口或一个约定,然后不同的场景可以对其进行实现,调用方在 ...

  7. 前台使用Vue

    前台搭建遇到问题 ----前台访问量大 未采用vue 单页面SAP 的方式构建 使用多HTML构建页面 项目构建 vue 2.6 https://cn.vuejs.org/ elementUI htt ...

  8. char与varchar2字符类型的区别

    1.实验: 1)创建一个表test,包含三个字段,数据类型分别是varchar2,number,char create table test(name varchar2(10),id number(1 ...

  9. Activity侧滑返回的实现原理

    简介 使用侧滑Activity返回很常见,例如微信就用到了.那么它是怎么实现的呢.本文带你剖析一下实现原理.我在github上找了一个star有2.6k的开源,我们分析他是怎么实现的 //star 2 ...

  10. DOS命令行（4）——Windows系统的配置与管理（上）

    sfc --运行系统文件检查器(需要以管理员身份运行命令提示符) 命令格式:SFC [/SCANNOW] [/VERIFYONLY] [/SCANFILE=<file>] [/VERIFY ...