首页 网络技术
  1. 正文

vue作用域插槽有什么用

作用域插槽

利用好作用域插槽可以做一些很有意思的事情,比如定义一个基础布局组件A,只负责布局,不管数据逻辑,然后另外定义一个组件B负责数据处理,布局组件A需要数据的时候就去B里面去取。假设,某一天我们的布局变了,我们只需要去修改组件A就行,而不用去修改组件B,从而就能充分复用组件B的数据处理逻辑,关于这块我之前写过一篇实际案例,可以点击这里查看。

这里涉及到的一个最重要的点就是父组件要去获取子组件里面的数据,之前是利用slot-scope,自vue 2.6.0起,提供了更好的支持 slot 和 slot-scope 特性的 API 替代方案。
比如,我们定一个名为current-user的组件:

<span><slot>{{ user.lastName }}</slot></span>

父组件引用current-user的组件,但想用名替代姓(老外名字第一个单词是名,后一个单词是姓):

<current-user>{{ user.firstName }}</current-user>

这种方式不会生效,因为user对象是子组件的数据,在父组件里面我们获取不到,这个时候我们就可以通过v-slot
来实现。

首先在子组件里面,将user作为一个<slot>元素的特性绑定上去:

<span><slot v-bind:user="user">{{ user.lastName }}</slot></span>

之后,我们就可以在父组件引用的时候,给v-slot带一个值来定义我们提供的插槽 prop的名字:

<current-user><template v-slot:default="slotProps">{{ slotProps.user.firstName }}</template></current-user>

这种方式还有缩写语法,可以查看独占默认插槽的缩写语法,最终我们引用的方式如下:

<current-user v-slot="slotProps">{{ slotProps.user.firstName }}</current-user>

相比之前slot-scope代码更清晰,更好理解。

本文标题:vue作用域插槽有什么用
本文链接:https://www.qqooo.cn/post/6930.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 xsds@vip.qq.com 处理,谢谢!