Vue.js slots: 为什么你需要它们？

KavenFan 发布于2019-08-21 17:51 / 1206人阅读

摘要：你创建了这样一个组件使用方法如下这样就可以正常运行了。上述代码可能会出现一些问题，如果需要更多按钮更多交互等等这些情况，怎么办幸好，提供了一个更简洁的解决方案具名。

也许你已经看过了Vue.js slots的文档。我对这个功能从“为什么你可能需要它”到“没有它我怎么可能工作”的态度转变非常快。
虽然文档已经解释了它的概念，但是这里有一个关于slots怎么改进应用程序代码库的真实例子。
在我看来，slots是vue最有用和最有趣的特性之一。虽然这是web组件所推荐的标准，但是我不知道有其他框架已经实现了这一特性。解释slots的作用很简单，但是很难解释它为什么有用（如果不使用“可组合性”这个术语），所以我要给你一个使用例子。

假设你的app有很多表单，表单包含几个部分：

表单头部：包含关于表单的信息

表单元素：供用户输入

按钮

现在你想要把表单抽象为一个独立组件。你那些使用react和angular的同事告诉你，你需要使用类似React的组合vs继承或者Angular1的Transclude这样的特性，于是你找到了slots的文档。

你创建了这样一个组件：



  {{ title }}

使用方法如下：

这样就可以正常运行了。可是，产品告诉你，一个特定的表单需要一个文本块来获得帮助信息的标题，按钮名要改为“Request”。这超出了“children”能做的范围。



  {{ title }}
  {{ helpMessage }}

上述代码可能会出现一些问题，如果需要更多按钮、更多交互等等这些情况，怎么办？幸好，vuejs提供了一个更简洁的解决方案：具名slots。于是，你把代码改成下面这样：



  {{ title }}

使用方法：



  
    Please ask your manager before requesting hardware.

在我看来，关键思想是：

将slots当作传递给子组件的属性。就像传递字符串、整数和对象，而slots是传递一个子dom树，让子组件可以在任何需要的地方使用。

使用slots的其他场景：

通用的模态窗

类似bootstrap的面板和自定义内容这样的事情

使用slots的更多优点：

子组件用于样式和展示，业务逻辑都保留在父元素中。

如果没有传递内容给slots，就不会展示东西。这让你可以很好地复用它们，并且只在你想要的slots中传递。

GPU云服务器云服务器 sql server 有哪几种系统数据库?它们的作用是什么? Vue.js vue.js 属性大数据数据很多你要什么

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

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

Vue.js 的注意事项与技巧

摘要：需要注意的是，同样的行为也适用于。这意味着我们必须重新绑定每个事件。组件的由调用它的父组件提供，这意味着所有事件都应该与父组件相关联。原文链接：Vue.js — Considerations and Tricks showImg(https://segmentfault.com/img/bVbqHOd?w=1600&h=1599); Vue.js 是一个很棒的框架。然而，当你开始构建...

lsxiao 2019-08-26 13:39 评论0 收藏0
Vue.js非常重要之组件

摘要：它们之间必然需要相互通信父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。父组件通过向下传递数据给子组件，子组件通过给父组件发送消息。这是由使用的父组件决定的。 Vue.js的组件注册组件全局注册要注册一个全局组件，你可以使用 Vue.component(tagName, options)。例如： Vue.component(my-component, { ...

ysl_unh 2019-08-21 16:16 评论0 收藏0
Vue.js-Render函数

摘要：函数通过参数来创建虚拟，结构精简。其中，访问的用法，使用场景集中在函数。使用代替模板功能在函数中，不再需要内置的指令，比如。方法时快速改变数组结构，返回一个新数组。学习笔记：Render函数 Render函数 Vue2与Vue1最大的区别就在于Vue2使用了虚拟DOM来更新DOM节点，提升渲染性能。 Vue2与Vue1最大的区别就在于Vue2使用了虚拟DOM来更新DOM节点，提升...

ccj659 2019-08-23 16:03 评论0 收藏0
详解vue组件三大核心概念

摘要：前言本文主要介绍属性事件和插槽这三个基础概念使用方法及其容易被忽略的一些重要细节。至于如何改变，我们接下去详细介绍单向数据流这个概念出现在组件通信。比如上例中在子组件中修改父组件传递过来的数组从而改变父组件的状态。的一个核心思想是数据驱动。前言本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件，也可以从这三个部分展开，它们...

rickchen 2019-08-23 17:51 评论0 收藏0
Vue.js-组件详解

摘要：事件总线事件总线首先创建了一个名为的空的实例然后全局定义了组件最后创建了实例。在父组件模板中，子组件标签上使用指定一个名称，并在父组件内通过来访问指定名称的子组件。学习笔记：组件详解组件详解组件与复用 Vue组件需要注册后才可以使用。注册有全局注册和局部注册两种方式。全局注册 Vue.component(my-component, {}); 要在父实例中使用这个组件，必须要...

jeffrey_up 2019-08-23 16:02 评论0 收藏0