VUE——插槽

插槽（slot）在我学习的内容中感觉也是父子组件传值。下面就说下，可能很片面欢迎评论补充。

首先创建一个usecomponent.vue页面（子组件），把它引用到App.vue页面（父组件）中去。（参考）

在usecomponent的html部分写入

<p>准备实现插槽功能</p>
<slot>hello插槽</slot>

然后在App的html部分写入

<UserComponent>      //引入组件显示
    <p>我是父亲</p>
    <p>我是你爸爸</p>
</UserComponent> 

这个时候html中的<p></p>标签内容传给usecomponent内容显示了。如果没有<p></p>就会显示<slot></slot>中的内容。、

当子组件中的<slot></slot> 绑定属性

<slot name="hello">hello插槽</slot>

父组件传递参数的时候也要有响应的绑定例如：

<div slot="hello">
   <p>我是父亲</p>
   <p>我是你爸爸</p>
</div>

如果没有slot="hello"子组件就不能找到父组件穿过来的<p></p>中的内容。

如果想子组件传递内容给父组件如何写呐：就在slot标签中写传递的内容就好了“text” 在Data中是被赋值了的。

<slot name ="world" v-bind:text="text">hello </slot>

父组件要如何接收子组件传递的数据呐：添加slot-scope="props"就可以了。

 <p slot="world" slot-scope="props">{{props.text}}</p>

如果父传子有不理解的欢迎评论留言。