Vue Slot用法

liangdas 发布于2019-08-21 10:51 / 2254人阅读

摘要：示例这是命名的节点该节点在逻辑代码中，可以使用来获取命名的。该节点在文件中，可以使用来承接命名的。

Vue在讲组件时，建议最好不要在父作用域中传值给子组件，不知道为什么用slot；

slot背景

为什么要用slot？

个人理解：

为了保证组件内容的灵活性，组件的内容由其所在的上下文环境确定；

将组件必要的内部层级透明地展现在组件所在的上下文环境中；

slot分类默认的slot

默认的slot是指那些在调用组件时,没有指定slot属性的嵌套子节点。

示例：

  
    这是默认的slot节点
    这是命名的slot节点

该节点在DefinedComponent.vue逻辑代码中，可以使用this.$slots.default来获取默认的Array([VNode])：数组第一项即是封装

这是默认的slot节点

的VueNode对象。

该节点在DefinedComponent.vue文件中，可以使用来承接默认的slot：

//DefinedComponent.vue

命名的slot

命名的slot是指那些在调用组件时，指定slot属性的嵌套子节点。

示例：

  
    这是命名的slot节点

该节点在DefinedComponent.vue逻辑代码中，可以使用this.$slots.definedSlot来获取命名的Array([VNode])。

该节点在DefinedComponent.vue文件中，可以使用来承接命名的slot。

//DefinedComponent.vue

slot的应用 缺省的嵌套子节点

组件内需要根据所在上下文提供嵌套子节点，且需要设置缺省值的时候，可以查看以下示例：

view/index.vue

components/Navigation.vue

指定位置的slot

按照预定的坑位填坑。

view/index.html

components/Null.vue

GPU云服务器云服务器 slot js slot linux pci slot Vue_Vue

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

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

vue 2.6 插槽更新 v-slot 用法总结

摘要：在中，我们为具名插槽和作用域插槽引入了一个新的统一的语法即指令。它取代了和这两个目前已被废弃但未被移除且仍在文档中的特性。新语法的由来可查阅。在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性。新语法的由来可查阅 RFC。引vue官方文档之前...

selfimpr 2019-08-26 13:33 评论0 收藏0
vue 2.6 中 slot 的新用法

摘要：最近发布不久的，使用插槽的语法变得更加简洁。插槽可用包裹外部的标签或者组件，并允许其他或组件放在具名插槽对应名称的插槽上。在部分中，监听的变化，当发生变化时，清除状态，然后调用并，当成功完成或失败时更新状态。为了保证的可读性，本文采用意译而非直译。最近发布不久的Vue 2.6，使用插槽的语法变得更加简洁。对插槽的这种改变让我对发现插槽的潜在功能感兴趣，以便为我们基于Vue的项目提...

genedna 2019-08-23 18:34 评论0 收藏0
细谈 vue - slot 篇

摘要：结合我们的例子，子组件则会生成以下代码到目前为止，对于普通插槽和作用域插槽已经谈的差不多了。下面我们将仔细谈谈这块的内容。在看具体实现逻辑前，我们先通过一个例子来先了解下其基本用法然后进行使用页面展示效果如下看着好。本篇文章是细谈 vue 系列第二篇了，上篇我们已经细谈了 vue 的核心之一 vdom，传送门今天我们将分析我们经常使用的 vue 功能 slot 是如何设计和实现的，本文将围...

kaka 2019-05-23 16:26 评论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.js-组件详解

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

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