VUE组件之间数据传递全集

4,067 阅读2分钟
原文链接: github.com

父子组件之间传递

父 -> 子

(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的做法就是将这一些公共的数据抽离出来,然后其他组件就可以对这个公共数据进行读写操作,这样达到了解耦的目的。