VUE组件之间数据传递全集

[Hancoson]

父子组件之间传递

父 -> 子

(props)属性值方式

• 父组件关键代码：

  <template>
    <Child :child-msg="msg"></Child>
  </template>

• 子组件关键代码：

  export default {
    name: 'child',
    props: {
      child-msg: String //这里指定了字符串类型，如果类型不一致会警
    }
  };

child-msg 为父组件给子组件设置的额外属性值，属性值需在子组件中设置props，子组件中可直接使用child-msg变量。

子组件调用父组建

子组件通过 $parent 获得父组件，通过 $root 获得最上层的组件。

provider/inject

简单的来说，就是在父组件中通过provider提供变量，在子组件中通过inject来注入组件。不论（子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据，只要在父组件的生命周期内，子组件都可以调用。

实例：

// 父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}  

// 子组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

子 -> 父

发送/监听事件

• 子组件某函数中发送事件：

  this.$emit('eventName','data')

• 父组件中监听子组件事件：

  <Child @eventName='todo()'></Child>

  • eventName为子组件自定义发送事件名称
  • todo()为父组件处理方法
  • data为子组件向父组建传递的参数

父组件直接获取子组建属性和方法

给要调用的子组件起个名字。将名字设置为子组件 ref 属性的值。

<!-- ref的值是组件引用的名称 -->
<child-component ref="name"></child-component>

父组件中通过$refs组件名来获得子组件，也就可以调用子组件的属性和方法了。

let child = this.$refs.name
child.属性
child.方法()

父组件通过 $children 可以获得所有直接子组件（父组件的子组件的子组件不是直接子组件）。需要注意 $children 并不保证顺序，也不是响应式的。

非父子组件

eventBus

目前eventBus通行方式是解决兄弟组件之间通信的最佳方式。使用方法：

• 定义一个新的vue实例

  //eventBus.js
  import Vue from 'vue'
  export default new Vue();

• 发送事件（发送数据）

  import bus from '@/bus';
  
  //方法内执行下面动作
  bus.$emit('childa-message', this.data);

• 组件内监听（接收数据组件）

  import bus from '@/bus';
  
  //方法内执行下面动作
  bus.$on('childa-message', function(data) {
    console.log('I get it');
  });

vuex方式传值

如果业务逻辑复杂，很多组件之间需要同时处理一些公共的数据，这个时候才有上面这一些方法可能不利于项目的维护，vuex的做法就是将这一些公共的数据抽离出来，然后其他组件就可以对这个公共数据进行读写操作，这样达到了解耦的目的。