[30天 Vue学好学满 DAY16] slot 插槽

slot

在子元件(内层)中预留空间，由父元件(外层)设定、分配内容。
子元件本身对slot无控制权
子元件可对slot内容进行预设

Fallback Content 後备内容

子元件可对slot内容进行预设

父元件引用子元件

<HelloWorld>我会传进子元件</HelloWorld>
<HelloWorld></HelloWorld>

子元件 HelloWorld.vue

// default value
<slot>父元件没传就显示我!</slot>

起前端验证

子元件无slot控制权

调整子元件HTML

<div>
    以下是子元件!
</div>

定义子元件showVal

return {
    showVal: '我是子元件 Val'
};

父元件引用子元件 HTML

<h1>{{ showVal }}</h1>
<HelloWorld>{{ showVal }}</HelloWorld>

定义父元件showVal

return {
    showVal: '我是子元件 Val'
};

起前端验证

-> 可以看到子元件的 showVal 无资料显示

调整子元件HTML 新增插槽

以下是子元件!
<br>
<slot></slot>

起前端验证

-> 成功将父元件直插入插槽

传递HTML

<HelloWorld><button>按我</button></HelloWorld>

具名插槽 name

多插槽时，需定义 name 属性
使用 slot template
-> 超过一个不具名插槽会产生叠加

子元件 HTML

<div>
    <h1>
      <slot name="contentH1"></slot>
    </h1>
    <h2>
      <slot></slot>
    </h2>
    <h3>
      <slot name="contentH3"></slot>
    </h3>
    <p>
      <slot></slot>
    </p>
</div>

父元件 HTML

<HelloWorld>
    <template slot="contentH1">具名h1内容</template>
    不具名h2内容
    // v-slot 只能配合 template 使用
    <template v-slot:contentH3>具名h3内容</template>
    不具名p内容
</HelloWorld>

三种写法

<template slot="contentH1">具名h1内容</template>
<template v-slot:contentH1>具名h1内容</template>
<template v-slot:contentH1>具名h1内容</template>
<template #contentH1>具名h1内容</template>

起前端验证