Vue slot

Posted mapsxy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue slot相关的知识,希望对你有一定的参考价值。

Slot使用
1、组件中有单个或多个未命名slot标签时,如下:
<Child><span style=”color:red;”>hello world</span></Child>   

<template>    
  <div>
<slot></slot>
<slot  style=”color:blue;” >这是在slot上添加了样式</slot>
<slot  name=”mySlot”>这是拥有命名的slot的默认内容</slot>
</div>
</template>
会输出:两个红色的hello world,以及一个使用slot的默认内容

注意:在slot标签添加样式无效。拥有命名的插槽不能被不含slot属性的标签内容替换,会显示slot的默认值(具名slot具有对应性);

2、组件中有多个命名的slot插槽时,可以实现父组件对子组件的指定位置显示内容或传参,如下:

<Child>
<span slot="header">hello world</span>
<span slot="main">hello world</span>
<span slot="footer">hello world</span>
<span slot="other">{{otherData}}</span>
</Child>

<template>
<div>
<slot  name=”header”>这是拥有命名的slot的默认内容</slot>
<slot  name=”main”>这是拥有命名的slot的默认内容</slot>
<slot  name=”footer”>这是拥有命名的slot的默认内容</slot>
<slot  name=”other”>这是拥有命名的slot的默认内容</slot>
</div>
</template>

3、作用域插槽!!:
使用时候子组件标签<Child>中要有<template scope=”scopeName”>标签,再通过scopeName.childProp就可以调用子组件模板中的childProp绑定的数据,所以作用域插槽是一种子传父传参的方式,解决了普通slot在parent中无法访问child数据的去问题;

作用域插槽代表性的用例是列表组件,允许在parent父组件上对列表项进行自定义显示,如下该items的所有列表项都可以通过slot定义后传递给父组件使用,也就是说数据是相同的,不同的场景页面可以有不同的展示方式:

   <ul>
      <slot name="item" v-for="item in items" :text="item.text" :myname="item.myname" >
         slot的默认内容
      </slot>
   </ul>

   <Child>
      <template slot="item" scope="props">
        <li>{{props.myname}}</li>
      </template>
   </Child>































以上是关于Vue slot的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序-slot插槽

微信小程序-slot插槽

微信小程序-slot插槽

vue2与vue3的区别

Vue初识Vue,Vue简介及Vue Devtools配置

vue学习笔记初识vue——创建vue示例