66 lines
1.5 KiB
Markdown
66 lines
1.5 KiB
Markdown
# 组件name作用
|
||
|
||
>面试题：组件 name 有什么用？可不可以不写 name？
|
||
|
||
**如何定义组件name**
|
||
|
||
- Vue2 OptionsAPI：添加 name 配置项即可
|
||
|
||
```js
|
||
export default {
|
||
name: 'xxxx', // 组件的name
|
||
}
|
||
```
|
||
|
||
- Vue3 CompositionAPI
|
||
|
||
- 多书写一个script标签，仍然导出对象，在对象中配置name
|
||
|
||
```vue
|
||
<script setup>
|
||
// ...
|
||
</script>
|
||
<script>
|
||
export default {
|
||
name: 'xxx'
|
||
}
|
||
</script>
|
||
```
|
||
|
||
- 通过一个 defineOptions 的宏来配置name
|
||
|
||
```vue
|
||
<script setup>
|
||
defineOptions({
|
||
name: 'xxx'
|
||
})
|
||
</script>
|
||
```
|
||
|
||
|
||
**组件name的作用**
|
||
|
||
1. 通过名字找到对应的组件
|
||
- 递归组件
|
||
- 跨级组件通信
|
||
2. 通过 name 属性指定要缓存的组件
|
||
3. 使用 vue-devtools 进行调试时，组件名称也是由 name 决定的
|
||
|
||
>面试题：组件 name 有什么用？可不可以不写 name？
|
||
>
|
||
>参考答案：
|
||
>
|
||
>在 Vue 中，组件的 name 选项有多个作用，虽然它不是必须的，但在某些场景下它非常有用。
|
||
>
|
||
>1. 通过名字找到对应的组件
|
||
>
|
||
> - 递归组件
|
||
> - 跨级组件通信
|
||
>2. 通过 name 属性指定要缓存的组件
|
||
>3. 使用 vue-devtools 进行调试时，组件名称也是由 name 决定的
|
||
>
|
||
>即使在没有上述特殊需求的情况下，添加 name 也有助于提高代码的可读性，尤其是在调试和分析性能时。为组件命名可以使开发者更清楚地了解每个组件的用途和角色。
|
||
|
||
---
|
||
|
||
-EOF- |