详解Vue.js 作用域、slot用法（单个slot、具名slot）
作用域
在介绍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>
总结
以上所述是小编给大家介绍的Vue.js 作用域、slot用法（单个slot、具名slot）,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关推荐
-
详解Vue.js分发之作用域槽
首先,需要知道的是,每个组件有每个组件自己的作用域.每个组件都是Vue()的实例,有自己的作用域. 比如现在有个组件这样的: Vue.component('father-component1',{ template:'<div class="father"><p>Hi,我是父组件</p>{{fatherMessage}}</div>', data:function(){ return { fatherMessage:'这是父组件发出的消息
-
Vue.js特性Scoped Slots的浅析
什么是scoped slots A scoped slot is a special type of slot that functions as a reusable template (that can be passed data to) instead of already-rendered-elements. 上面是官方的定义. 作用域插槽(Scoped Slots)是vue.js中一个非常有用的特性,它可以使组件更加通用和复用.唯一的问题是理解起来比较困难.试图去让你理解父与子作用域
-
详解vue.js数据传递以及数据分发slot
一.组件间的数据传递 1.父组件获取子组件的数据 *子组件把自己的数据,发送到父级 *vm.$emit(事件名,数据); *v-on: @ 示例用法:当点击send按钮的时候,"111"变成"我是子组件的数据" <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父级获取子级的数据
-
Vue.js中组件中的slot实例详解
Vue组件中的slot slot 可以实现在已经定义的组件中添加内容,组件会接收内容并输出,假如有一个组件person,它的里面包含的是个人信息,如下面这样 <template id="per"> <div> <p>姓名:...</p> <p>年龄:...</p> <p>职业:...</p> </div> </template> 在应用的时候,当然希望这里面可以是灵活
-
Vue.js之slot深度复制详解
前言 在Vue中,slot是一个很有用的特性,可以用来向组件内部插入一些内容.slot就是"插槽"的意思,用大白话说就是:定义组件的时候留几个口子,由用户来决定插入的内容. 例如我们定义一个组件MyComponent,其包含一个slot: Vue.component('MyComponent', { template: ` <div> <slot></slot> </div> ` }) 当调用<MyComponent>123&
-
详解Vue.js 作用域、slot用法（单个slot、具名slot）
作用域 在介绍slot前,需要先知道一个概念:编译的作用域.比如父组件中有如下模板: <child-component> {{message}} <child-component> 这里的message就是一个slot,但是它绑定的是父组件的数据,而不是组件< child-component >的数据. 父组件模板的内容是在父组件作用域内编译,子组件模板的内容是在子组件作用域内编译. <div id="app"> <child-co
-
详解Vue.js中.native修饰符
修饰符(Modifiers)是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定.这篇文章给大家介绍Vue.js中.native修饰符,感兴趣的朋友一起看看吧. .native修饰符 官方对.native修饰符的解释为: 有时候,你可能想在某个组件的根元素上监听一个原生事件.可以使用 v-on 的修饰符 .native .例如: <my-component v-on:click.native="doTheThing"></my-component>
-
详解 vue.js用法和特性
前 言 最近用Vue.js做了一个数据查询平台,还做了一个拼图游戏,突然深深的感到了vue的强大. Vue.js是一套构建用户界面(user interface)的渐进式框架.与其他重量级框架不同的是,Vue 从根本上采用最小成本.渐进增量(incrementally adoptable)的设计.Vue 的核心库只专注于视图层,并且很容易与其他第三方库或现有项目集成.另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供有力驱动. Vue.j
-
详解Vue.js 响应接口
Vue 可以添加数据动态响应接口. 例如以下实例,我们通过使用 $watch 属性来实现数据的监听,$watch 必须添加在 Vue 实例之外才能实现正确的响应. 实例中通过点击按钮计数器会加 1.setTimeout 设置 10 秒后计算器的值加上 20 . <div id = "app"> <p style = "font-size:25px;">计数器: {{ counter }}</p> <button @click
-
详解Vue.js 可拖放文本框组件的使用
可拖放文本框允许用户通过拖动备选项至文本框来确定输入,其实也可以说是 combobox 的一种变形. 与 combobox 相比,这种组件能让用户更加直观的看到所有备选项,并且可以是多个输入共用一组备选项. 类似的组件也曾用在 3D Windrose App,Graph Maker App 等多个 app 里. 注册组件 注册可拖放文本框组件(其实就是将封装好的这部分代码 Ctrl+C and Ctrl+V). <script type="text/x-template" id=
-
实例详解vue.js浅度监听和深度监听及watch用法
第一个浅度监听: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id=&quo
-
详解vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然成为了第一个问题.鉴于目前web前端mvvm框架以及组件化开发方式的流行,决定技术栈采用:vue + es6 + 组件化. 这里首先简单说下web前端组件化开发方式的历程: 最早的组件化结构,代码结构可能如下: - lib/components/calendar |- calendar.css |-
-
详解Vue.js项目API、Router配置拆分实践
前后端分离开发方式前端拥有更高的控制权 随着前端框架技术的飞速发展,Router这个概念也被迅速普及到前端项目中,在早期前后的没有分离的时期下,并没有明确的路由概念,前端页面跳转大多是通过后端进行请求转发的,比如在Spring MVC项目中,进行一个页面跳转如下(画红线部分): 前端需要一个超链接,链接的href=/manager,这样这个超链接被转发到scs/waitFollowed路径指定的页面. 前后的分离后,前端页面跳转的方式发生了变化,不再需要后端处理了,数据交换方式也改变了,由此前端