vue-----组件通信/传值

一 父子组件通信分为父给子传和子给父传

父给子传：

1.在子组件标签中写传入的值

2.在子组件内使用props接收父组件传递的值。

子给父传：

 1.在子组件内部使用$emit发射自定义事件和传递给父组件的值
  2.在父组件内声明自定义事件接受参数

二 兄弟组件通信

      1.声明一个事件总线Bus.js  
            export default new Vue();
        2.引入事件总线
            import Bus from 'xx.js'
            //vue.prototype.$emit()
            使用总线$emit发射数据出去
            Bus.$emit(自定义事件名称,发射的数据)
        3.引入事件总线    
            Bus.$on(自定义事件名称,(形参--->发射得数据)=>{

            })

三 祖孙组件传值

    1.由祖先组件使用provide方法传递数据
    provide(){
        return {"msg":this.msg}
    }
    2.由子孙组件使用inject注入数据
    inject:["msg"]

---

一 父子组件通信

1.1父给子传：

1.在子组件标签中写传入的值

2.在子组件内使用props接收父组件传递的值。

 1.2 子给父传：

 1.在子组件内部使用$emit发射自定义事件和传递给父组件的值
  2.在父组件内声明自定义事件接受参数

二 兄弟组件通信

2.1声明一个事件总线 Bus.js

import Vue from 'vue';
export default new Vue();

2.2 引入事件总线

import Bus from 'xxx.js'

使用事件总线发射事件$emit发射数据出去

Bus.$emit(自定义事件名称，发射的数据)

2.3引入事件总线

Bus.$on(自定义事件的名称，(形参--就是发射的数据)=>{
})

Brother1:

Brother2:

App:

三  祖孙组件通信

3.1由祖先组件使用provide方法传递数据

provide(){
return{"msg":this.msg}
}

3.2 由子孙组件使用inject注入数据

inject:["msg"]

 孙组件 Brother1Child:

父组件  Brother1

祖先组件 Grandfather

 

单向数据流(数据更改的方向)：

点击父组件修改子组件age：

点击子组件修改父组件age的值   出现了报错

单向数据流(数据更改的方向)小结:

父组件可以改给子组件的数据
子组件不可以改父组件的数据