vue--slot插槽

父组件向子组件传递数据的方式—slot插槽的方式

父组件将数据插入到子组件指定的位置

在父组件里引用子组件后,在子组件的标签里直接插入一个内容或者一个DOM结构

在子组件里设置一个slot组件,通知父组件要传的DOM结构等数据可以通过这个插槽传递过来

父子组件之间有了约定了,那么写在子组件标签里的内容自然而然会显示出来

当父组件没有数据传递过来的时候,slot显示自己默认的数据

当父组件有数据传递过来的时候,就会将slot的位置替换掉

这就是文章开头所说的“指定的位置”

 

有时一个插槽并不够用,可以需要多个插槽

如果想让数据与插槽一一对应的话,需要给插槽进行name的设置

我们在父组件里只要指名插槽的名字,就可以将数据插入到相应的插槽内

父组件的代码如下:

<about>
     <div slot="slot1">所有过往皆为序章1</div>
     <div slot="slot2">所有过往皆为序章2</div>
     <div slot="slot3">所有过往皆为序章3</div>
</about>

子组件里的代码如下:

<slot name="slot1">1</slot>
<slot name="slot2">2</slot>
<slot name="slot3">3</slot>

 原文链接:https://mp.weixin.qq.com/s/4cC0jBuQwBRcASfdqwSjCA

posted @ 2018-12-30 13:39  阿猫nieo  阅读(263)  评论(0编辑  收藏  举报