Vue组件通信 - Githubissues

1.props

作用：父组件给子组件传值用法：在子组件中添加props属性，在父组件中引入子组件标签时绑定这个属性，并把值设置为父组件的一个data。在子组件中，props实际上和data中数据一样，可以用各种方法修改它。同时，可以把props属性设置为一个对象，其中可以设置默认值，是否必须，类型等。示例 子组件：

<p>这是我的名字{{name}}</p>

export default{
  props['name']
}

父组件：

<子组件 :name= ' value'> </子组件>

export default{
  data(){
    return{
      value: 'zz'
    }
  }
}

2.自定义方法

作用:子组件给父组件传值用法：在子组件中使用$emit方法。$emit参数有两个：emit事件名称和需要传递的值。然后再父组件的子组件标签中监听那个emit事件，并接收传递过来的值。示例 子组件：

<button  @click = 'set'  ></button>

methods:{
  set(){
    let a = 10
    this.$emit('setName', a)
  }
}

父组件

<子组件 @set = “hehe = $event”></子组件>

data(){
  return{
    hehe: 'bs'
  }
}

3.回调函数法

作用：把父组件的方法放到子组件中从而通过方法给子组件传值。相比直接传值不会报错。用法：在父组件中的methods中设置一个方法，在父组件的子组件标签中绑定一个属性，并把值设置为父组件的这个方法。在子组件中的props中设置这个绑定的那个属性为Function

示例子组件：

<button  @click = ' reset()'></button>

data(){
  hei : ' v ' 
}
props:{
  reset: Function
}

父组件：

<子组件  :reset = 'chuan'></子组件>

methods:{
  chuan(){
    hei = 'ddd'
  }
}

因此通过在子组件中的props设置数据和函数可以达到双向通信的效果

4.eventBus

作用：实现在同一路由下的组件（可以是兄弟组件，也可以是其它关系）间通信。用法：在main.js中设置一个全局的Vue实例，或者直接在Vue原型链上添加一个Vue实例。如Vue.prototype.eventBus= new Vue();其中的eventBus就是事件总线。

在需要发送数据的组件中： (起点站) eventBus.$emit('事件名'，要传递的数据) 在需要接收数据的组件中：（终点站）

eventBus.$on('事件名'，(data)=>{
  对data进行处理
})

因为这个eventBus本身就是个Vue实例，可以在其中的methods中把起点站函数重新封装：

Vue.prototype.eventBus= new Vue({
  methods: {
    send(data){
      this.$emit('click', data)
    },
    receive(回调函数){
      this.$on('click', 回调函数)
    }
  }
})

此时就可以简化使用eventBus了。

5.Vuex

简单来说vuex的功能就是保存多个组件中公用的数据并且是响应式的，即会在组件中改变。各组件也都能访问到。因此可以用vuex进行各组件间通信。官方称之为状态管理。

LastPoem / Notes

Vue组件通信 #28

1.props

2.自定义方法

3.回调函数法

4.eventBus

5.Vuex