🔵Vue组件

本文最后更新于:2022年5月3日 下午

组件注册

🥕组件注册

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>

🥬具名插槽

slotname属性绑定插槽

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组件
https://qingshaner.com/vue组件/
作者
清山
发布于
2022年1月22日
许可协议