程序员vue教程

vue2视频教程系列第三十二节—slot插槽

2018-10-14  本文已影响10人  独绽2018
image

slot插槽的使用方法。

我们之前有学习过组件,并且了解了父组件是如何向子组件传递数据的。我们再回忆一下父组件向子组件的传递数据的步骤:

  1. 在子组件里自定义属性,这个自定义属性会携带着所要传递的数据。
  2. 子组件里用props属性去接收。

Vue里还为我们提供了另一种父组件向子组件传递数据的方式—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>

今天学习了父组件向子组件传值的另一种方式,至于在项目中我们使用哪种方式才好呢?看各人喜好和项目的需要了。相信大家在不断地实践当中会总结出来的。

就到这里了,休息休息一会儿吧:)

微信公众号:前端晨话

上一篇下一篇

猜你喜欢

热点阅读