vue父子组件传值

一、父组件向子组件传值

1.在子组件的调用标签上使用自定义属性进行传值

2.子组件通过props属性进行接收，子组件把接受来的数据当成data里数据来使用

3.props只能是父组件向子组件进行传值，props使得父子组件之间形成了一个单向下行绑定。子组件的数据会随着父组件

4.props可以显示定义一个或一个以上的数据，对于接收的数据可以是各种数据类型，同样也可以传递一个函数

        
        
            父组件
            --------
            
            
        
        
        
        
    

二、子组件向父组件传值

1.在子组件的标签上绑定自定义事件

2.自定义事件的处理函数中接收子组件传来的值

        
        
            父组件接收到子组件的值为{{ a }}
            
        
        
        
        
    

三、总结 

父子组件间传值：

①子组件通过props属性来接受父组件的数据，然后父组件在子组件上注册监听事件，子组件通过emit触发事件来向父组件发送数据。

②通过ref属性给子组件设置一个名字。父组件通过$refs组件名来获得子组件事件，子组件通过$parent获得父组件，这样也可以实现传值。

四、拓展

兄弟组件和任意组件之间的传值：

可以使用eventBus其实就是创建一个事件中心，相当于中转站，可以用它来传递事件和接受事件

如果业务逻辑实属复杂，很多组件之间需要同时处理一些公共的数据，比如购物车，这个时候就应该去使用vuex，更方便了项目的维护。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。