之前的文章我们介绍了一下 vue 中插槽的使用，本章我们接着介绍一下 vue 中的作用域插槽。

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>vue</title>
  6.      <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  7.  </head>
  8.  <body>
  9.  <div id="app">
  10.      <child></child>
  11.  </div>
  12.  <script>
  13.      Vue.component("child", {
  14.          data() {
  15.              return {
  16.                  list: ["aaa", "bbb", "ccc"]
  17.              }
  18.          },
  19.          template: `
  20.              <div>
  21.                  <p v-for="(item,index) of list" :key="index">{{item}}</p>
  22.              </div>
  23.         `
  24.      });
  25.      var app = new Vue({
  26.          el: '#app',
  27.      })
  28.  </script>
  29.  </body>
  30.  </html>

在上面的代码中我们在子组件 child 中定义了一个 list 的数据，然后通过循环输出的形式把每一项输出在了一个 <p> 标签内，结果如下：

上面的代码显然符合我们之前的预期，但是现在有一个问题，我想让 list 数组内的数据不是放在 <p> 标签内，而是放在一个 <h1> 标签内，那这样的话我们就需要将 template 内的 <p> 标签换为 <h1> 标签，但是别的地方却需要使用 <p> 标签输出，这该怎么办，我们总不能写两个不同的子组件吧，官方为我们提供了作用于插槽来解决这个问题，如下：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>vue</title>
  6.      <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  7.  </head>
  8.  <body>
  9.  <div id="app">
  10.      <child>
  11.          <template slot-scope="props">
  12.              <h1>{{props.item}}</h1>
  13.          </template>
  14.      </child>
  15.  </div>
  16.  <script>
  17.      Vue.component("child", {
  18.          data() {
  19.              return {
  20.                  list: ["aaa", "bbb", "ccc"]
  21.              }
  22.          },
  23.          template: `
  24.              <div>
  25.                  <slot v-for="(item,index) of list" :key="index" :item="item">{{item}}</slot>
  26.              </div>
  27.         `
  28.      });
  29.      var app = new Vue({
  30.          el: '#app',
  31.      })
  32.  </script>
  33.  </body>
  34.  </html>

我们将 template 内的 <p> 标签变为 <slot> 标签，然后在 <slot> 标签内加上一个 :item="item" 的属性，意思是将 item 内容通过 :item="" 的形式展示出去。

在 <child> 标签内加入一个 <template> 标签，标签内加入 slot-scope="props"，意思是通过 slot-scope="scope" 将 template 内的 slot 进行连接。

然后输出 <h1>{{props.item}}</h1> ，意思是将连接的 slot 内的展示出来的 :item 内的值展示出来，并且展示在 <h1> 标签内。

运行结果如下：

符合我们的预期，这样我们如果想让输出内容放在 <p> 标签内，只需要将 <h1> 标签改为 <p> 标签即可，不需要再去改动子组件。

Vue 从入门到进阶之路（十二）的更多相关文章

  1. Vue 从入门到进阶之路（十四）

    之前的文章我们对 vue 的基础用法已经有了很直观的认识,本章我们来看一下 vue 中的生命周期函数. 上图为 Vue官方为我们提供的完整的生命周期函数的流程图,下面的案例我们只是走了部分情况流程,但 ...

  2. Vue 从入门到进阶之路（十三）

    之前的文章我们介绍了一下 vue 中的作用域插槽,本章我们来看一下动态组件与 v-once 指令. <!DOCTYPE html> <html lang="en" ...

  3. Vue 从入门到进阶之路（十一）

    之前的文章我们说了一下 vue 中组件的原生事件绑定,本章我们来所以下 vue 中的插槽使用. <!DOCTYPE html> <html lang="en"&g ...

  4. Java 从入门到进阶之路（二十）

    在之前的文章我们介绍了一下 Java 中的包装类,本章我们来看一下 Java 中的日期操作. 在我们日常编程中,日期使我们非常常用的一个操作,比如读写日期,输出日志等,那接下来我们就看一下 Java ...

  5. Java 从入门到进阶之路（二十二）

    在之前的文章我们介绍了一下 Java 中的  集合框架中的Collection 中的一些常用方法,本章我们来看一下 Java 集合框架中的Collection 的迭代器 Iterator. 当我们创建 ...

  6. Java 从入门到进阶之路（二十四）

    在之前的文章我们介绍了一下 Java 中的  集合框架中的Collection 的泛型,本章我们来看一下 Java 集合框架中的Collection 的子接口 List. Collection 接口有 ...

  7. Java 从入门到进阶之路（二十五）

    在之前的文章我们介绍了一下 Java 中的  集合框架中的Collection 的子接口 List的 增删改查和与数组间相互转换的方法,本章我们来看一下 Java 集合框架中的Collection 的 ...

  8. Java 从入门到进阶之路（二十六）

    在之前的文章我们介绍了一下 Java 中的  集合框架中的Collection 的子接口 List,本章我们来看一下 Java 集合框架中的Collection 的子接口 Queue. 在之前我们讲 ...

  9. Java 从入门到进阶之路（二十八）

    在之前的文章我们都是通过 Java 在内存中应用,本章开始我们来看一下 Java 在系统文件(硬盘)上的操作. 系统文件就是我们电脑中的文件,简单来说就是像 Windows 系统中 C D E 等各类 ...

随机推荐

  1. 【玩转SpringBoot】给自动配置来个整体大揭秘

    上一篇文章中提到的条件注解,只是自动配置整体解决方案中的一个环节而已,可以说是管中窥豹. 本文就逐步擦除迷雾,让整体浮现出来,这样就会有一个宏观的认识. 除了写代码之外,还能干点什么? 提到“配置”这 ...

  2. 《Dotnet9》系列-开源C# WPF控件库强力推荐

    时间如流水,只能流去不流回! 点赞再看,养成习惯,这是您给我创作的动力! 本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform.W ...

  3. uni-app实现多端开发

    多端开发,听名字就感觉不一样,一套代码.多端使用,适用于各个平台.市面上很多关于多端开发的框架,比较常用,流行的框架 uni-app,Chameleon(变色龙),taro这些,都可以支持多端,一套代 ...

  4. JS---封装缓动（变速）动画函数---增加任意一个属性

    封装缓动(变速)动画---增加任意一个属性 1. 本来的变速动画函数,是获取特定的属性(之前案例是向右移动,所以获取的是left属性) 2. 现在改变为,获取任意一个属性,使其移动到指定的target ...

  5. 基于Tomcat部署的Geoserver配置Geowebcache，并转发ArcGIS切片

    1.将GeowebCache的war包解压到tomcat的webapp下,打开war包中的WEB-INF中的web.xml文件,同时创建一个你想保存geowencache的切片的空文件夹,例如我命名叫 ...

  6. JavaEE初学笔记之Servlet与Tomcat

    JavaEE开发,本质上就是开发一个个Servlet,然后部署到Servlet容器(如Tomcat)里运行.   1. Servlet是什么? Servlet就是一个普通的接口(Interface), ...

  7. LeetCode 二叉树的锯齿形层次遍历

    第103题 给定一个二叉树,返回其节点值的锯齿形层次遍历.(即先从左往右,再从右往左进行下一层遍历,以此类推,层与层之间交替进行). 例如: 给定二叉树 [3,9,20,null,null,15,7] ...

  8. springboot2.x实现oauth2授权码登陆

    参考文章:https://blog.csdn.net/qq_27828675/article/details/82466599 一 进行授权页 浏览器输入http://localhost:8081/o ...

  9. Ubuntu Server 上使用Docker Compose 部署Nexus(图文教程)

    场景 Docker-Compose简介与Ubuntu Server 上安装Compose: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/deta ...

  10. Angular（04）-知识点脑图

    点击左键 => 拖拽图片 => 新标签页查看图片 => 放大拖拽查阅