#Vue3篇：透传 Attributes---$attrs插槽propemit

camelCase（驼峰命名）和 kebab-case（短横线命名）

Props 声明

const props = defineProps([‘foo’])
除了使用字符串数组来声明 props 外，还可以使用对象的形式：
defineProps({
title: String,
likes: Number
})

响应式 Props 解构

const { foo } = defineProps([‘foo’])

prop校验

https://cn.vuejs.org/guide/components/props.html

触发与监听事件

在组件的模板表达式中，可以直接使用 $emit 方法触发自定义事件 (例如：在 v-on 的处理函数中)：

<button @click=“$emit(‘someEvent’)”>Click Me

父组件可以通过 v-on (缩写为 @) 来监听事件：
<MyComponent @some-event=“callback” />

声明触发的事件

透传 Attributes

“透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 class、style 和 id。

<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>

如果需要，你可以在

插槽

默认插槽
具名插槽
动态插槽
作用域插槽

{{ slotProps.text }} {{ slotProps.count }}

具名作用域插槽

依赖注入

provide 和 inject 可以帮助我们解决这一问题 [1]。一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。

provide() 函数接收两个参数。第一个参数被称为注入名，可以是一个字符串或是一个 Symbol。后代组件会用注入名来查找期望注入的值。一个组件可以多次调用 provide()，使用不同的注入名，注入不同的依赖值。

第二个参数是提供的值，值可以是任意类型，包括响应式的状态，比如一个 ref：