vue.js的<slot>

philadelphia 发布于2019-08-22 13:49 / 2059人阅读

摘要：而事实上这个的组件功能逻辑完全和一样，只是多了一项年龄信息。这也是插槽最基本的用法。匿名插槽和具名插槽除非子组件模板包含至少一个插口，否则父组件的内容将会被丢弃。可以通过为插槽指定具名插槽来指定渲染一个组件中多个插槽中的某一个。

使用插槽分发内容
在封装vue组件的时候，很多时候就不得不使用到vue的一个内置组件。slot是插槽的意思，顾名思义，这个组件的意义是预留一个区域，让其中的DOM结构可以由调用它的组件来渲染。

假设现在有一个people组件，结构如下：

当我们注册这个组件之后，就可以在其他组件中这样子使用

我们都很清楚上面的代码最后渲染的样子。


    用户信息
    
      *填写的内容必须真实
      姓名
      性别

一般来说我们这样子封装组件是没有问题的了。但是有时候我们在开发中，需要的组件还需要更抽象一点。我们试想以下，假设我们的组件的功能是获取用户的信息，点击确定上传到服务器。如果是按照上面的方式封装这个组件，那么我们每次调用这个组件就只能让用户输入姓名和性别。假设在另外的场景中，我们还需要用户输入多一项年龄信息，那我们的这个组件就不能使用了，就还得需要另外一个一个组件。。而事实上这个的组件功能逻辑完全和一样，只是多了一项年龄信息。在这种情况下，就相当于再写了一个重复的组件。那有没有办法可以让我们的组件可以更通用点。这时候摆在我们面前的问题就是，能不能在调用的时候，可以指定组件应该怎么渲染?组件就是为了解决这种问题而存在的。

我们改变一下的封装方式：

我们在需要由父组件来渲染的部分使用插槽，相当于占位。这样我们就可以在调用的时候，再指定这个组件里面有什么内容：



渲染之后是：


    用户信息
    
      *填写的内容必须真实
      姓名
      性别

这样子我们的组件就更为通用了。并且当调用的组件没有指定内容的时候，组件里的内容会渲染。如下图。这也是vue.js插槽最基本的用法。

匿名插槽和具名插槽

除非子组件模板包含至少一个插口，否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的插槽（匿名插槽）时，父组件传入的整个内容片段将插入到插槽所在的 DOM 位置，并替换掉插槽标签本身。

可以通过为插槽指定name（具名插槽）来指定渲染一个组件中多个插槽中的某一个。


  
  


调用

  slot1的内容
  slot2的内容


渲染的结果：

  slot1的内容
  slot2的内容

作用域插槽

这种特殊的插槽可以暴露子组件中的内容,把数据交由父组件来渲染。看下面的例子：

子组件 的模板


父组件中调用：

    
        
    


渲染的结果为：

    
    子组件内部的tip

云服务器 GPU云服务器 asp中&lt&gt的意思 python &lt&gt java &lt=&gt java&lt &gt

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92490.html

Vue编程三部曲之模型树优化实战代码

　　实践是所有展示最好的方法，因此我觉得可以不必十分细致的，但我们的展示却是整体的流程、输入和输出。现在我们就看看Vue 的指令、内置组件等。也就是第二篇，模型树优化。　　分析了 Vue 编译三部曲的第一步，「如何将 template 编译成 AST ?」上一篇已经介绍，但我们还是来总结回顾下，parse 的目的是将开发者写的 template 模板字符串转换成抽象语法树 AST ，AST 就这里...

3403771864 2022-10-10 22:36 评论0 收藏0
详解Vue3 Composition API优雅封装第三方组件

　　我们时常会想在保持第三方组件原有功能（属性props、事件events、插槽slots、方法methods）的基础上，这些功能如何优化的实现？　　以Element Plus的el-input为例：　　在封装一个MyInput组件，把要使用的属性props、事件events和插槽slots、方法methods先要依照自己的需求来编写：　　//MyInput.vue 　　<template&...

3403771864 2022-10-30 10:34 评论0 收藏0
解析Vue编译器optimize源码

　　之前我们讲过template转成AST（抽象语法树），现在我就继续对模型树优化，进行静态标注。这要如何实现？　　在源码的注释中我们找到了下面这段话：　　/** * Goal of the optimizer: walk the generated template AST tree * and detect sub-trees that are purely static, i.e. part...

3403771864 2022-10-09 22:06 评论0 收藏0
基于element-ui表格的二次封装实现

　　项目中element的表格，每次都cv很麻烦，可以用表格进行了二次封装，写一个Table组件。　　首先，下面是表格样式　　<el-table 　　:data="tableData" 　　:header-cell-style="headerStyle" 　　:height="height" 　　:border="bord...

3403771864 2022-09-12 18:39 评论0 收藏0
python中的特性管理模式详细说明

　　本文关键阐述了python中的特性管理模式,主要包含私有属性和特性局限-__slots__方式，原文中阐述了python中怎样去声明变量的基本知识，必须的小伙伴可以借鉴一下　　一、私有属性　　Python并没真正意义上的民营化适用，但可以用下横线获得伪私，其中一项大部分Python编码都遵照的好习惯：含有下横线，作为前缀的名字应被称作非公开的API中的一部分（不论是函数公式、方式或是数据成员）...

89542767 2023-01-14 10:48 评论0 收藏0