Vue3组件传值方式有哪些深入理解？

本文共计370个文字，预计阅读时间需要2分钟。

目录 + 父子组件传值 + props + 祖孙组件传值 + provide 和 inject + 父组件中点击按钮向子组件传值 + 今天说一说 Vue3 的组件间传值，学习过 Vue2 的宝宝们肯定知道，组件传值是 + Vue 项目开发中不可或缺的环节。

目录

• 父子组件传值 props
• 祖孙组件传值 provide 和 inject
• 父组件中点击按钮向子组件传值

今天说一下 vue3 的组件间传值，学习过 vue2 的宝子们肯定知道，组件传值是 vue 项目开发过程中必不可少的功能场景，在 vue2 里面有很多传值的方式，vue3 的传值方式呢，在这里稍微整理总结一下，但是不是很全，后期可能慢慢补充。

父子组件传值 props

和 vue2 一样，vue3 也可以使用 props 进行父组件传值给子组件，这个就不多说了直接上代码。

父组件

<template> <div> <div class="father"> <h1>这是父组件</h1> <h2>父组件的名字：{{boy.name}}</h2> </div> <hello-world :msg="msg" :boy="boy" @change="btn"></hello-world> </div> </template> <script> import HelloWorld from "./components/HelloWorld.vue"; import { ref, reactive } from "vue"; export default { name: "App", components: { HelloWorld }, setup() { const boy = reactive({ name: "我是