🔵Vue组件

本文最后更新于：2024年4月25日 上午

组件注册

🥕组件注册

1
2
const app = Vue.creatApp({  }/* 组件对象]*/)
app.component('component-name', )

🥕全局注册

1
2
3
Vue.createApp({...}).component('component-name',{
    // ...
})

🥕局部注册

1
2
3
4
const componentName = {
    /...
}
const app = Vue.createApp('', {})

props

1
2
3
4
5
6
7
8
props: {
    key: {
        type: [
            String | Number | Boolean | Array | Object | Date | Function | Symbol
        ],               // 可多选
        default: null    // 默认值
    }
}

插槽

组件模板中添加slot标签可以将组件识别为双标签

插槽不可访问父组件作用域

DOM:

1
2
3
<my-component>
    插入位置
</my-component>

模板:

1
2
3
<div>
    <slot>/* 默认内容 */</slot>
</div>

🥬具名插槽

用slot的name属性绑定插槽

无name属性的会默认有name="default"

在DOM中用<template v-slot:slot-name></template>

v-slot:name缩写#name

模板:

1
2
3
4
5
6
7
8
9
10
11
<div>
    <header>
        <slot>/* 默认内容 */</slot>
    <header>
    <main>
        <slot name="main">/* 默认内容 */</slot>
    </main>
    <footer>
        <slot name="footer">/* 默认内容 */</slot>
    </footer>
</div>

DOM:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<my-page>
    <template v-slot:default>
        <h1>
            header
        </h1>
    </template>
    <template v-slot:main>
        <h2>
            main
        </h2>
    </template>
    <template v-slot:footer>
        <h2>
            footer
        </h2>
    </template>
</my-page>

🥬插槽传参

用#name={ x, y, ... }向插槽传参

可用#name={ x = 0, y = 1, ... }提供默认值

使用缩写不提供name(如:#={ x, y, ... })传参无效

🥬动态插槽

v-slot:[name]实现动态插槽

Vue
#Vue #笔记
🔵Vue组件
https://qingshaner.com/vue组件/
作者
清山
发布于
2022年1月22日
许可协议