详解Vue.js 作用域、slot用法（单个slot、具名slot）

更新时间：2019年10月15日 10:37:44 作者：吴声子夜歌

这篇文章主要介绍了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.js 时间转换代码及时间戳转时间字符串,需要的朋友可以参考下
2018-10-10
vue项目通过a标签下载图片至zip包的示例代码
在vue项目中,将图片下载可使用流的形式,下载成单个图片,或者将多个图片下载至zip包,本文就是介绍使用a标签下载图片的用法,文中有详细的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下
2023-10-10
手把手教你如何创建一个VUE项目(超简单)
这篇文章主要给大家介绍了关于如何创建一个VUE项目的相关资料,创建vue项目有很多种方式,这里给大家介绍一种非常简单的方法,需要的朋友可以参考下
2023-08-08
vue实现元素拖动并互换位置的实现代码
在使用Vue的场景下,需要实现对元素进行拖动交换位置,接下来通过本文给大家介绍vue实现元素拖动并互换位置的实现代码,需要的朋友可以参考下
2023-09-09
详解在Vue中如何模块化使用Vuex
这篇文章给大家介绍了在Vue 中如何模块化使用 Vuex,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2024-01-01
vue elementui二次封装el-table带插槽问题
这篇文章主要介绍了vue elementui二次封装el-table带插槽问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
element-UI el-table树形数据修改小三角图标方式
这篇文章主要介绍了element-UI el-table树形数据修改小三角图标方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
一文带你了解Vue 和 React的区别
这篇文章主要介绍了Vue和React的区别，毕竟是两个框架，不像两个 API，要说细节上的区别就太多太多了，本文就简单的带大家说说Vue 和 React 的区别,需要的朋友可以参考下
2023-05-05
Vue绑定class和绑定内联样式的实现方法
本文主要介绍了Vue绑定class和绑定内联样式的实现方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
vue3 使用setup语法糖实现分类管理功能
这篇文章主要介绍了vue3 使用setup语法糖实现分类管理,本次模块使用 vue3+element-plus 实现一个新闻站的后台分类管理模块，其中新增、编辑采用对话框方式公用一个表单，需要的朋友可以参考下
2022-08-08