Vue作用域插槽的使用

ゝ一世哀愁。 2023-06-28 14:28 132阅读 0赞

关于vue插槽，也用过很多次了，但是关于作用域插槽的用法，有些模糊，查了很多文档，自己理解记忆。

在[官网上][Link 1]说：  
![在这里插入图片描述][20200109145839660.png]  
举例：你现在有一个组件，这个组件叫：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>` 组件：

我们可能想换掉备用内容，用性别而不是姓名显示。如下：

<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，当然你还可以把父组件的数据传入子组件，然后使用作用域插槽在父组件中渲染，更加灵活。

推荐[一篇博文][Link 2]，写的很仔细，从头看完就明白了。

[Link 1]: https://cn.vuejs.org/v2/guide/components-slots.html#%E7%BC%96%E8%AF%91%E4%BD%9C%E7%94%A8%E5%9F%9F
[20200109145839660.png]: https://img-blog.csdnimg.cn/20200109145839660.png
[Link 2]: https://www.w3cplus.com/vue/vue-js-scoped-slots.html