vue组件间传值的六种方法

一、 vue组件间传值

1. 父组件向子组件进行传值props

父组件代码：

子组件代码：

页面显示：

2. 子组件向父组件传值$emit

子组件代码：

父组件代码：

页面显示：

---

父子组件传值原理：父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示：

3. $parent / $children && ref

• ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
• $parent / $children：访问父 / 子实例
  两种都是直接得到组件实例，使用后可以直接调用组件的方法或访问数据。

ref 使用代码：

// component-a 子组件
export default
 {
  data () {   
    return
     {
         title: 'Vue.js'
     }
  },
  methods: {
    sayHello () {
      window.alert('Hello');
    }
  }
}
// 父组件

 

$parent/$children 使用代码：

// child 子组件
export default
 {
  data () {   
    return
     {
         name: '我是子组件的数据'
     }
  },
  created() {
	console.log(this.$parent, ''获取父组件的实例对象")
  },
  methods: {
    sayName () {
      window.alert('我是子组件的方法');
    }
  }
}
// 父组件

 

4. 总线机制bus

这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。

公共bus.js：

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

组件A代码：

组件B代码：

4. vuex

PMT知识库地址：vuex

5. $attrs / $listeners

• $attrs：包含了父作用域中不被 prop 所识别 (且获取) 的属性 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的属性 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。
• $listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件。

接下来我们看个跨级通信（$attrs）的例子：

index.vue：

//index.vue

childCom1.vue：

//childCom1.vue

childCom2.vue：

//childCom2.vue

• inheritAttrs为 false 的情况：不会显示在子组件的dom元素上
  
• inheritAttrs为 true 的情况(默认)：会显示在子组件的dom元素上
  
  $listeners例子：

// 父组件

// 子组件

这样绑定原生事件很麻烦，每一个原生事件都需要绑定，但用v-on="$listeners"就会省事很多。

6. provide / inject

• 成对出现：provide和inject是成对出现的；
• 作用：用于父组件向子孙组件传递数据；
• 使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据；
• 使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据。

父组件定义：

子孙组件接受方式：

注意：provide并不是响应式的，当子组件inject的时候已经丢失了响应式功能
要希望整个数据都是响应式的—provide提供一个函数。
函数内部返回一个响应式的数据。此时整条数据的响应式的状态并不会丢失。

//父组件传值的定义个回调函数

//子组件用计算属性取值，watch监听
export default {
  inject: ['getParentVal'],
  computed: {
    actConfig() {
      this.parentValue= this.getParentVal().parentValue // 获取初始时父组件传过来的值
      return this.getParentVal();
    },
  },
  watch: {
    actConfig(val) {
      console.log("组件监听到的值", val);
      this.parentValue= val.parentValue
    },
  },
  data() {
    return {
      parentValue: ''
    }
  },
};

总结

常见使用场景可以分为三类：

• 父子通信： 父向子传递数据是通过 props，子向父是通过 events（ $emit）；通过父链 / 子链也可以通信（$parent / $children）；ref 也可以访问组件实例；provide / inject； $attrs / $listeners

• 兄弟通信： Bus；Vuex

• 跨级通信： Bus；Vuex；provide / inject、 $attrs / $listeners