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

selfimpr 发布于2019-08-26 13:33 / 1768人阅读

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

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

引vue官方文档
之前做项目时,对插槽理解太少了,这两天学习时,才发现插槽更新用v-slot了,自己做了些简单总结,与大家分享一下~

插槽

我的理解就是
父页面在组件标签内插入任意内容,子组件内插糟slot控制摆放位置
(匿名插槽,具名插槽)

插槽分类

插槽一共就三大类
1.匿名插槽(也叫默认插槽): 没有命名,有且只有一个
2.具名插槽: 相对匿名插槽组件slot标签带name命名的
3.作用域插槽: 子组件内数据可以被父页面拿到(解决了数据只能从父页面传递给子组件)

匿名插槽(也叫默认插槽default)

用法:我的理解,匿名插糟只需要一个.(就是这些,不太复杂)
父页面:

  
        
    
//v-slot:default写上感觉和具名写法比较统一,容易理解,也可以不用写

子组件 todoList.vue

我是默认值

##显示##
// 任意内容
// 我是匿名插槽

具名插槽(name)

用法:我的理解,和匿名插槽比较,就是必须起名todo对应,可以有多个具名插槽.(没了~)
父页面

  
        
  
// todo
data() {
     return {
       dynamicSlotName:"todo"  
     }

 },

子组件

我是默认值

##显示##
// 任意内容
// 我是匿名插槽

对 v-slot:todo 做操作:

动态命名

v-slot:{dynamicSlotName}//替换标签上 v-slot:todo

具名插槽缩写(匿名插槽用法)(可以后看)

#todo 替换标签上 v-slot:todo

匿名如果想用必须加上default

#default 替换标签上 v-slot:todo

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

作用域插槽

1.重点是slotProps接取子组件里:user="user" :test="test"类似属性的数据
父页面


   
 
//slotProps 可以随意命名
//slotProps 接取的是子组件标签slot上属性数据的集合所有v-bind:user="user"

子组件

 
        {{ user.lastName }}
   
data() {
        return {
            user:{
                lastName:"Zhang",
                firstName:"yue"
            },
            test:[1,2,3,4]
        }
    },
// {{ user.lastName }}是默认数据   v-slot:todo 当父页面没有(="slotProps")
// 时显示 Zhang


## 显示 ##
// yue

解构插槽Prop

父页面 (子组件不变显示一样)

// 相当于
function (slotProps) {
  // 插槽内容
}
(slotProps)=>参数可以用slot标签上现有的值({user,test})替换


   
 
## 显示 ##
## // yue

参数值替换名字(可以后看)


   
 

// v-slot:[dynamicSlotName]="{user:person,test}
## 显示 ##
## // yue

独占默认插槽缩写(可以后看)
感觉没什么机会用,限制条件太多

总结

在用上v-slot之后只需要考虑好
1.是否需要命名(匿名插槽,具名插槽)
2.父页面是否需要取存在子页面的数据(作用域插槽)

todo-list实例

可以试一下,便于理解~
父页面

子组件

私有云云服务器插槽服务器插槽 linux 查看硬盘插槽 linux 查看硬盘插槽数

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

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

vue 2.6 中 slot 的新用法

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

genedna 2019-08-23 18:34 评论0 收藏0
vue 插槽，`slot`和 `slot-scope`已被废弃

摘要：它取代了和这两个目前已被废弃但未被移除且仍在文档中的特性。例外情况当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。如下，让后备内容默认内容替换正常情况下的绑定在元素上的特性被称为插槽。最近忙着写一些组件，关于插槽这一块自己还是用着 slot 和 slot-scope，然后看了一下文档的更新，于是又重新把插槽学习了一篇，下面一段是文档中的说明: 在 2.6.0 中...

myshell 2019-08-02 15:29 评论0 收藏0
vue 插槽，`slot`和 `slot-scope`已被废弃

摘要：它取代了和这两个目前已被废弃但未被移除且仍在文档中的特性。例外情况当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。如下，让后备内容默认内容替换正常情况下的绑定在元素上的特性被称为插槽。最近忙着写一些组件，关于插槽这一块自己还是用着 slot 和 slot-scope，然后看了一下文档的更新，于是又重新把插槽学习了一篇，下面一段是文档中的说明: 在 2.6.0 中...

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

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

kaka 2019-05-23 16:26 评论0 收藏0