vue-组件化-插槽(slot)

理解

Vue组件化中,当我们在设计一个组件的时候,可能会保留一部分,让使用者自定义的内容,比如:

  1. 导航栏组件中,右上角的分享按钮,左上角做菜单按钮
  2. 弹出框组件中,弹出框的提示内容等
  3. ...

在这种场景下,把保留给使用者的部分,叫做插槽(slot)

插槽分类

匿名插槽

理解:

  1. 所谓匿名插槽,就是这个插槽里,没有声明任何名称,使用者放进来的东西,都扔进这个插槽中。
  2. 匿名插槽是一种特殊的具名插槽,也就是名为default的插槽

写法:

//自定义组件中


//页面(使用者)使用

代码中我被放进了插槽中这句话,就进入了自定义组件的匿名插槽中,从而变成了

//自定义组件中

具名插槽

理解:所谓具名插槽,就是这个插槽里,这个插槽被命了名,使用者放进来的东西,声明了插槽的名称,会被分发进这个具名插槽中。
写法:使用template标签声明具名插槽名称

//自定义组件中


//页面(使用者)使用

代码被分发到对应插槽后的内容

//自定义组件中

作用域插槽

理解:一种能够将子组件可用的内容暴露给父组件的插槽。
比如:我们有的时候,需要一些子组件里的东西,做内容拼接,就像一个用户名输入框,我们希望所有的用户名,都跟随一个user_的前缀,此处就可以使用到作用域插槽

//自定义组件中



//页面(使用者)使用

编译后的结果就变成了


默认值(后备内容)

理解

插槽是拥有默认值功能的,如果对应的slot没有传入内容,则会使用slot的默认值

写法

以匿名参数为例

//自定义组件中


//页面(使用者)使用

最终表现结果为


动态插槽名

理解

可以使用动态值来定某些内容进入某些具名插槽中

写法

正常的具名插槽为v-slot:插槽名,动态的写法为v-slot:[dynamicSlotName],此写法仅在vue2.6.0后的vue中版本使用

简写插槽名

正常的具名插槽为v-slot:插槽名,简写的写法为#插槽名,此写法仅在vue2.6.0后vue中版本使用

你可能感兴趣的:(vue-组件化-插槽(slot))