组件通信

组件通信方式类别

VueJs提供的props和自定义事件

eventbus

vuex

通信方式	区别
props	用于父组件传递数据给子组件
自定义事件	用于子组件向父组件通信
eventBus	适用于非父子组件通信的简单场景，使用一个空的vue实例作为中央事件总线
Vuex	状态管理，适用于复杂场景

props

父组件传递数据给子组件：

1.子组件显示地用props选项申明获得的数据：

export default {  name: 'vheader',  props:['myMessage','myData'],}

2.父组件传递数据

至此，子组件将获取到数据vue2.0和porpsdownData

自定义事件

每个vue实例都实现了事件接口：

$on(eventName)监听事件（不能用 $on 侦听子组件释放的事件，而必须在模板里直接用 v-on 绑定）

$emit(eventName)触发事件
例如：

//App.vue 父组件
    import buttonCounter from ‘./buttonCounter.vue’exoprt default{   name:’app’,   data(){    return{        Counter:0    }   },   componts:{    buttonCounter:buttonCounter    },    methods(){        incrementTotal(){            This.total += 1        }    }}

//buttonCounter.vue 子组件
    exoprt default{    name:’buttonCounter’,    methods(){    incrementCounter(){        this.$emit(‘increment’)      }    }}

注意点

1.每次父组件更新，子组件所有prop会更新为最新值。因此，不能在子组件内部改变prop，如果做了，vue会在控制台给出警告。

2.注意在 JavaScript 中对象和数组是引用类型，指向地址，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。

eventbus

1.创建中央事件总线eventbus.js:

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

2.创建v-component-a.vue子组件

3.创建v-component-b.vue子组件

4.在父组件注册两个子组件

注意点：

eventbus.$on('getName',(arg)=>{        this.getMyMsg(arg) })

若写成es6的箭头函数，则直接写this，否则需要先在eventbus.$on之前将this赋值给let self=this;

Vuex

转载地址：http://eucpa.baihongyu.com/

你可能感兴趣的文章

组件通信

组件通信方式类别

props

自定义事件

eventbus

子组件A(event bus)

子组件B { {name}}

Vuex

子组件B {
{name}}