关于vue插槽,也用过很多次了,但是关于作用域插槽的用法,有些模糊,查了很多文档,自己理解记忆。
在官网上说:
举例:你现在有一个组件,这个组件叫:navigation-link,它里面有一个匿名插槽,它被在另一个组建中调用,并且传入一个url,要在这个组件中渲染出来:
<navigation-link url="/profile">
<span> {{ url }}</span>
</navigation-link>
这当然是不可能的,span标签里的url会是undefined,这里的 url
会是 undefined,因为 “/profile” 是 传递给 <navigation-link>
的, 而不是 在 <navigation-link>
组件内部定义的。
那么问题来了,肯定会有这样的业务需求啊,这时候,就要用作用域插槽
了。
我将这个概念理解为:子组件的插槽要在父组件里使用子组件内部的数据,可以灵活的渲染子组件的dom结构以及数据。
emmmm,可能有点绕,但是举例:
设想一个带有如下模板的 <current-user>
组件:
<span>
<slot>{{ user.name}}</slot>
</span>
我们可能想换掉备用内容,用性别而不是姓名显示。如下:
<current-user>
{{ user.sex}}
</current-user>
然而上述代码不会正常工作,因为只有 <current-user>
组件可以访问到 user, 而我们提供的内容是在父级渲染的。
为了让 user 在父级的插槽内容中可用,我们可以将 user 作为<current-user>
组件里的 <slot>
元素的一个特性绑定上去:
<span>
<slot :user="user">
{{ user.name}} // 插槽默认内容是user.name
</slot>
</span>
绑定在 <slot>
元素上的特性被称为插槽 prop。现在在父级作用域中,我们可以使用带值的 v-slot
来定义我们提供的插槽 prop 的名字:
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.sex}}
</template>
</current-user>
这里说明:
1,这个作用域插槽必须使用模板template
,
2,这个v-slot:default
,是2.6.0以后的新语法,表示匿名插槽,如果是具名插槽<slot name="footer">
,应该是v-slot:footer
3,这个slotProps
是随便起的名字,高兴就好
ok,以上就解释完了,当然,这是基础版示例,当自己开发独立组件的时候,还可以在template中自定义子组件插槽中的dom结构,比如:
// 引用1
<current-user>
<template v-slot:default="slotProps">
<ul>
<li v-for="(item, index) in slotProps.userList"> {{item.name}}</li>
</ul>
</template>
</current-user>
// 引用2
<current-user>
<template v-slot:default="myScope">
<div>
<h1>{{myScope.apple.size}}</h1>
<p>{{myScope.apple.color}}</p>
</div>
</template>
</current-user>
这是不是很灵活,看起来so beautiful,当然你还可以把父组件的数据传入子组件,然后使用作用域插槽在父组件中渲染,更加灵活。
推荐一篇博文,写的很仔细,从头看完就明白了。