深入了解Vue3组件传值方式

目录

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

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

父子组件传值 props

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

父组件

子组件

保存查看效果。

上面就是 props 传值的基本用法。

祖孙组件传值 provide 和 inject

这个其实和 vue2 的写法是一模一样的。

直接上代码！！

父组件

子组件

刷新看一下效果。

好的，我们可以看到子组件可以顺利拿到父组件传进来的数据值。

父组件中点击按钮向子组件传值

就是使用 ref 来获取dom 然后操作里面的参数和方法。

父组件

子组件

以上就是深入了解Vue3组件传值方式的详细内容，更多关于Vue3组件传值的资料请关注脚本之家其它相关文章！