组件传值

组件与组件之间不是完全独立的，而是有交集的，那就是组件与组件之间是可以传递数据的

props(父传子)

props 传递数据，只能从父级传递到子级，不能反其道而行。 但是可以实现子传父，稍后就会说

自定义事件(子传父)

在组件的模板表达式中，可以直接使用 $emit 方法触发自定义事件

触发自定义事件的目的是组件之间传递数据

props(子传父)

透传Attributes (样式传递)

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

当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上

当然你也可以直接在父组件里设置样式也行 .component-b {color: red;}

依赖注入(父传子)

通常情况下，当我们需要从父组件向子组件传递数据时，会使用 props。想象一下这样的结构：有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链逐级传递下去，这会非常麻烦

这一问题被称为“prop 逐级透传”

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

注意

provide 和 inject 只能由上到下的传递，不能反向传递

mitt事件总线(任意互传)

安装

npm install --save mitt

新建src/utils/mitt.ts文件

import mitt from "mitt"
const emitter = mitt()
export default emitter

发送数据

import emitter from "../../utils/mitt"
const message =ref("123")
emitter.emit("onsend", message.value)

接收数据

import emitter from "../../utils/mitt"
emitter.on("onsend", (data) => {
    consloe.log(data)
})