vue作用域插槽使用详解

今天看vue官方教程中的作用域插槽的内容，看了半天都没理解内容，只好动手码代码验证理解。动手是最能促进理解的方法，再去看原文，你会发现都是翻译惹的祸，翻译的真是有点差劲。

作用域插槽，主要是为了在父组件中访问子组件中的数据而提出来的一种方案。

一、`<slot>` 元素上动态绑定要在外面访问的对象

首先要在子组件中<slot> 元素上动态绑定一个你要在外面访问的对象属性，例如下面的例子中我们要在父组件中访问user对象。如果不进行绑定，在外面是访问不了的：

Vue.component("slot_demo",{data: function() {return {user : {firstName: "Liu", lastName: "Tao"}}},template : `<span><span>子组件：</span><slot :user="user">{{ user.lastName }}</slot></span>`})

二、父组件中定义一个名字，通过该名字访问子组件中的对象

名字可以随便起，比如下面的名字为slotInnerData，那么想访问上面第一步中的子组件绑定的user对象，只需要在正常的访问形式之前加入该名字限定就可以访问了。

<div id="slot_demo" ><slot_demo v-slot:default="slotInnerData">{{slotInnerData.user.firstName}}</slot_demo></div>

三、更方便的访问方式

上面的访问方式要多写一个名称，官方文档中给出了一种更方便的访问组件的方式。直接使用花括号引用子组件中的对象名称，然后就可以自由的访问了。

 <slot_demo v-slot:default="{user}">{{user.firstName}}</slot_demo>

四、在父组件中使用默认对象值

可以定义默认内容，用于插槽 prop 是 undefined 的情形。第一节中说了在slot中必须绑定要在父组件中访问的对象，如果没有绑定，那么使用默认对象值的方式就可以派的上用场了。

 <div id="slot_demo" ><slot_demo v-slot:default="{user = {firstName:'Guest'}}">{{user.firstName}}</slot_demo></div>

此时，如果子组件没有绑定user对象，那么上面代码中的user就是取的这里面的默认值。

五、结束

以上就是vue中作用域插槽使用上的关键知识点。当然它的更大用处，引用官网的一句话来说明

插槽 prop 允许我们将插槽转换为可复用的模板，这些模板可以基于输入的 prop 渲染出不同的内容。这在设计封装数据逻辑同时允许父级组件自定义部分布局的可复用组件时是最有用的。