Vue中父子组件如何进行通信？

一、父子组件如何进行通信？

父子间通信.png

1. 父组件向子组件通信使用 props, props定义在子组件中
2. 子组件向父组件通信使用parent

二、什么是父组件，什么是子组件？

要看组件的引用关系，如果A组件引用了B组件，那么A组件为父组件，B组件为子组件

三、组件构成父子关系的步骤
在父组件中：

1. 引入
2. 注册
3. 使用

四、代码示例：
其中app是父组件，Home是子组件

五、父子组件通信：父组件传递给子组件

1. 父组件向子组件传递数据，比如修改子组件的展示“这是Home组件” 改成 “这是Home组件，父组件传来的值：hello”

展示效果：

image.png

    
    




    

        
这是是APP组件 (父组件)
        
    
    


    

    

六、父子组件通信：子传递给父组件

子组件向父组件通信的话，需要通过$emit('自定义事件名'， 参数)的形式。通过事件的方式将数据回传给父组件。

举个实例：假设上述子组件中有两个按钮，一个按钮上展示的是red，一个按钮上展示的是blue，当点击按钮时，将red和blue传递给父组件。

效果图：

image.png

注意事项：

子组件中：
this.$emit('自定义事件名'，参数) 其中自定义的事件名不可使用驼峰命名法。

子组件的引用中需要@自定义事件名=

=号后可以跟父组件中的方法名，其中方法的参数即为子组件传递过来的参数。

    
    




    

        
这是是APP组件 (父组件)
        
        
子组件点击的是: {{ color }}