vue组件通信--注意事项及经验总结

最新推荐文章于 2024-04-20 18:55:40 发布

霜如明月

最新推荐文章于 2024-04-20 18:55:40 发布

阅读量581

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/q3254421/article/details/83065902

本文总结了Vue组件通信的常见方式，包括父->子、子->父、兄弟组件及祖先组件与子组件间的数据传递。强调了prop的使用细节，如静态与动态数据传递，对象引用的注意事项。此外，还探讨了$emit、$refs、Vuex以及非父子组件通信的解决方案，如Bus和路由URL。文章强调了在不同场景选择合适通信方式的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件间的通信是是实际开发中非常常用的一环，如何使用对项目整体设计、开发、规范都有很实际的的作用，我在项目开发中对此深有体会，总结下vue组件间通信的几种方式，讨论下各自的使用场景

文章对相关场景预览

父->子组件间的数据传递
子->父组件间的数据传递
兄弟组件间的数据传递
组件深层嵌套，祖先组件与子组件间的数据传递

文章相关技术预览prop、emit、bus、vuex、路由URL、provide/inject

注：以下介绍与代码环境： vue2.0+、vue-cli2

父->子组件间的数据传递

父子组件的通信是开发是最常用的也是最重要的，你们一定知道父子通信是用prop传递数据的,像这样：

//父组件,传递数据
<editor :inputIndex="data" :inputName="王文健"></editor>

//子组件，接受数据，定义传递数据的类型type与默认值default
    props: {
        inputIndex: {
            type: Object, 
            default: function(){
                return {}
            }
        },
        inputName: {
            type: String,
            default: ''
        }