vue-组件间通信

父子通信

1.父 => 子

在父组件template中调用子组件标签==>在子组件标签设置自定义属性并和父组件中data某项数据绑定==>子组件配置项使用props属性接收该自定义属性

==>子组件data配置新的变量属性接收props构建一个新副本==>调用该属性(防止引用变量被修改)

2.子 ==> 父

(1)在父组件中定义一个methods方法==>在父组件template中调用子组件标签==>在子组件标签设置自定义属性并和父组件中methods的该方法绑定(注意传的是方法变量名,存储引用方法的地址,而不是fn()执行结果)==>子组件配置项使用props属性接收该自定义属性==>然后在子组件methods通过this.属性名(子组件数据)调用该方法==>因为是引用变量,所以实际定义还在父组件,子组件却可以传输数据给该方法处理,实现子==>父