作用域

在介绍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. 8.5-7 mkfs、dumpe2fs、resize2fs

    8.5 mkfs:创建Linux文件系统     mkfs命令用于在指定的设备(或硬盘分区等)上创建格式化并创建文件系统,fdisk和parted等分区工具相当于建房的人,把房子(硬盘),分成几居室( ...

  2. 国外DIY网站

    https://site.douban.com/109950/widget/notes/250072/note/248811721/

  3. 10.5 arp：管理系统的arp缓存

    arp命令 用于操作本机的arp缓存区,它可以显示arp缓存区中的所有条目.删除指定的条目或者添加静态的IP地址与MAC地址的对应关系.     什么是arp?即地址解析协议(ARP,Address ...

  4. CSS设计模式介绍

    一. 常见CSS设计模式分析 oocss Object Oriented CSS,面向对象的CSS,旨在编写高可复用.低耦合和高扩展的CSS代码. OOCSS是以面向对象的思想去定义样式,将抽象(结构 ...

  5. HarmonyOS去除页面顶部title的方式

    在config.json文件中module节点中添加如下代码 "metaData":{ "customizeData":[ { "name" ...

  6. 用navigation的大致图

  7. java学习之旅

    jar文件其实就是一个压缩包,里面包含很多class文件(一个class文件是一个类的字节码).方便在网络上传输.可以规定版本号,更容易进行版本控制. var只能在方法内使用,不能用于定义成员变量. ...

  8. 写Bug时，需要注意的几点 02

    重构2-重新组织函数 重构的基本技巧--小步前进,频繁测试. 模式是你希望到达的目标,重构则是到达之路. 在单进程软件中,你永远不必操心多么频繁地调用某个函数,因为函数的调用成本很低.但在分布式软件中 ...

  9. HarmonyOS系统概述

    HarmonyOS系统概述 系统定位 HarmonyOS是一款"面向未来".面向全场景(移动办公.运动健康.社交通信.媒体娱乐等)的分布式操作系统.在传统的单设备系统能力的基础上, ...

  10. 实时双频Wi-Fi如何实现下一代车内连接

    实时双频Wi-Fi如何实现下一代车内连接 How real simultaneous dual band Wi-Fi enables next-generation in-vehicle connec ...