Vue作用域插槽的使用

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

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