vue踩坑之插槽理解(slot)

关于插槽自己的理解

我认为的插槽的含义: 简单的说,插槽就是可以让开发者自定义地往子组件中放置代码片段而开发出来的东西。就好像专门在某几个地方弄了几个槽(子组件中),我们开发时,就可以在对应的槽中放置对应的代码了。

开始的疑惑:

随便搞一个vue项目,自定义一个子组件 child,在父组件中引入这个子组件。

7140391-1a338ff9e03388ed.png
child

这个 msg 很明显是绑定的父组件中的msg属性值,可是,为什么这时候这个msg就不显示了呢?

接触插槽:

官方解释来了:

除非子组件模板包含至少一个 <slot> 插口,否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的插槽时,父组件传入的整个内容片段将插入到插槽所在的 DOM 位置,并替换掉插槽标签本身。

原来是这样导致了msg(父组件的内容) 被丢弃了

那我来试试 slot :

父组件中:


7140391-3be1596e450699bc.png
father.png

子组件中:


7140391-fe9d6d3f1e8f69a1.png
child.png

效果: (请忽视那个123)


7140391-8aab6619ea54bad4.png
image.png

这个zzzzz 真的被查到了slot对应的地方并取代了 xxxxxx

具名插槽

插槽成功解决了我们想要在父组件中定制化地在子组件内部显示一些内容。但是这样还远远不够。现在我们要在子组件内部传两句话,一个要红色的字,一个要绿色的字。那么,对于父组件传入的两个p标签,子组件该如何区分它们并把它们插入到不同的插槽中呢?

子组件代码:我们可以给一些插槽定义相应的名称

7140391-7f7532624ab0cd53.png
child2.png

父组件代码: 接着就可以在父组件中去填这些槽了

7140391-88a4ebb4fad4952c.png
father2.png

效果:那么这两个 p 标签就会找到子组件的对应槽(对号入座)

7140391-c8970ce0aebc71d2.png
show.png

ok,以前的开发中也碰到过 slot='xxx'这种代码,但是都不知道什么意思。现在明白了。slot研究出来是为了增加组件化开发中组件的灵活性。

作用域插槽

这个是最难理解的一个插槽了,也是最神奇最有功能性的一个插槽了。

这个插槽解决的问题不仅仅是可以在子组件中动态地放置一段html代码片段,而且还可以取到子组件中相应的一些值。

自定义需求: 做一个list组件,里面有一个按钮(可能是按钮,也可以是其他东西,这个东西要可以定制化,所以不能写到组件内部),点击这个按钮时可以获取到当前的这一项的数据。如果不用插槽, 想不到该如何去开发这个list组件

如图,我定义了一个list组件:

7140391-fe3aab3751d1d39e.png
list.png

这个list组件中数据由父组件传入,在内部通过v-for渲染,每一项含有一个插槽

父组件:


7140391-8a652eeb68cefc04.png
fatherlist.png

传入testList到子组件中 通过template(2.5也可以直接用这个button了,不过template用着还是舒服些) 使用slot-scope属性与list组件中的插槽进行绑定。 而slot-scope的值为子组件传递过来的数据

先看下效果:

7140391-cb21b39badfdb668.png
show2.png

可以看到,父组件将数据传递给了子组件,而且插槽的模板也生效了。

现在点击测试按钮,应该有一个参数scope传入到testBtn中,结合子组件,这个scope应该是这个样子的:

scope = {
    data: {
      //  当前的item
  }
}

现在看打印效果

7140391-e5068dea72784051.png
console.png

和预想的一样。 通过作用域插槽,可以很灵活的自定义一个list组件,并很轻松的在父组件中取到当前项的值。

猜你喜欢

转载自blog.csdn.net/weixin_34177064/article/details/87641038