vue作用域插槽详解、slot、v-slot、slot-scope

vue 插槽slot和具名插槽

作用都是在调用组件的时候传递一些DOM结构进去,

不同点是:具名插槽在传递DOM时需要声明,传递给哪个slot的名字 name

他们用法简单不在赘述。

重点说一下作用域插槽 slot-scope 的使用,以及vue2.6.X开始的新语法v-slot

作用域插槽的核心作用是 

子组件给父组件传递数据,当然也包含上述插槽的能力

老版作用域插槽,

  • slot="test": 指定插槽的名字用
  • prop:可以随便定义,表示子组件传递过来的值得对象,可以用解构复制 { row, index }接受

新版是这样的,可以说语法更加清晰

v-slot指令直接跟上插槽名称,prop同上

 

实例说明

子组件

这里我定义了多个具名插槽,并且用父组件传过来的数据尝试传递回去


父组件

部分代码:

其中的baseData,为服务端异步返回数据

  

效果图

这两种是先注释掉所有child里面,所有代码的效果,前为接口返回前

在这里插入图片描述

在这里插入图片描述

这两张是不注释,前后图

在这里插入图片描述

在这里插入图片描述

可以看出,

在vue2.6以上两种模式都支持,不过官方说3.0就只支持v-slot指令了,

不使用作用域插槽就会显示默认的值,使用之后就按父组件的来

可以先动态更新数据。

使用过element-ui的同学,只要用过表格,我想现在应该明白作用域插槽有多大的用处了吧

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

你可能感兴趣的:(vue作用域插槽详解、slot、v-slot、slot-scope)