vue复习(五)slot插槽

什么插槽?简单的说插槽就是在父组件里面插入的内容。父组件从标签起始到标签闭合就是一个插槽。

为什么要插槽了?试想一下,我们在开发中会遇到很多组件拥有者一些共性,但又不全一样,比如一个li下面可能是h1,h2,h3,那么这个h1,h2,h3就不能写在组件内部,当然我们可以用prop传值加v-if判定,但是这很不爽。

所以我们可以用到插槽。我们可以在父组件内部去写我们的h1,h2,h3,然后分发父组件得到内容。这样就j简单的多。同时我们也可以通过插槽去拿到父组件的值。这样我们编写的组件就更加的灵活易用,增强我们的复用性。

so先看一个简单的例子看看slot的基本实现:

子组件通过slot来分发父组件的默认内容

父组件内部插槽插入h1标签,即子组件的获得的内容渲染.

没错简单的插槽就是这么实现的,很简单的吧,当然插槽肯定不止这些,继续往下看。

有些时候我们不想分发父组件的全部内容,我只想要一部分,也许我们可以看看具名插槽:

给子组件name表示分发的插槽是谁。

父组件通过v-slot来指定插槽是谁。

这样我们就只分发对应的父组件的v-slot绑定的名称的组件。

当然v-slot你觉得很不爽。那么我们可以简写一下。用#试试。即都可以写成#:h1这种形式.

也许你就会问了我父组件想要拿到子组件里面的值怎么办,当然不用担心,插槽当然有准备,我们来看看作用域插槽:

 

还是这个例子,你会发现我们绑定了一个数据,这个数据就是我们要让插槽拿到的数据。子组件不需要多麻烦就这么简单。你就能让父组件拿到该数据。我们去父组件看下:

 

我们看到这里的v-slot被赋予了一个值,这个值就是子组件传过来的值,传过来的是一个对象我们直接可以解构获取。

 

ok成功的获取到了值。

当然有时我们插槽没内容是我们需要备用内容,我们直接在slot标签内部写就行。

插槽没内容就会渲染slot内部的内容。

当然你还得记住v-slot只能用在template上或者组件上。否则vue会抛出错误。这个以前版本的slot,scope-slot不一样。

 

 

 

转载于:https://my.oschina.net/u/3589917/blog/3082960

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值