关于vue.js:Vue中slot的使用

34次阅读

共计 1515 个字符,预计需要花费 4 分钟才能阅读完成。

集体了解:
是对组件的扩大,通过 slot 插槽向组件外部指定地位传递内容,通过 slot 能够父子传参;

开发背景 (slot 呈现时为了解决什么问题):
失常状况下,<Child><span style=”color:red;”>hello world</span></Child> 在组件标签 Child 中的 span 标签会被组件模板 template 内容替换掉,当想让组件标签 Child 中内容传递给组件时须要应用 slot 插槽;

Slot 的艰深了解

是“占坑”,在组件模板中占好了地位,当应用该组件标签时候,组件标签外面的内容就会主动填坑(替换组件模板中 <slot> 地位),当插槽也就是坑 <slot name=”mySlot”> 有命名时,组件标签中应用属性 slot=”mySlot”的元素就会替换该对应地位内容;

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>

正文完
 0