插槽

88 阅读1分钟

插槽是在HTML直接自定义组件时,应用的技术。

1.自定义插槽:

自定义元素通过slot属性添加ID,模板通过slot标签的NAME属性与其对应,实现任意的摆放位置。

2.匿名插槽: 不能任意摆放,群体标签在同一插槽点

<div id="app">

        <child-a>
            <h1 slot="gy1">我爱美丽的小公园1</h1>
            <h1 slot="gy2">我爱美丽的小公园2</h1>
        </child-a>
 </div>
 
<template id="childA">
        <div>
            <!-- 匿名插槽 <slot></slot> -->
            <!-- 具名插槽 -->
            <slot name="gy1"></slot>
            <h1>我是childA</h1>
            <slot name="gy2"></slot>
        </div>
    </template>