组件传值

刘春龙原创2026/3/5大约 3 分钟

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

props(父传子)

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

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

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

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

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

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

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

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

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

注意

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

安装

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)
})

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。