Vue 组件之间如何进行通信？

最新推荐文章于 2024-07-22 21:47:11 发布

Arachnid314

最新推荐文章于 2024-07-22 21:47:11 发布

阅读量141

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_43894639/article/details/123291439

版权

本文详细介绍了Vue中组件间通信的各种方式，包括props（父传子）、$emit（子传父）、eventBus（兄弟组件通信）、$children/$parent/$refs（组件实例引用）以及provide/inject（祖先组件向子孙组件传递数据）。此外，还提到了Vuex作为全局状态管理库在大型项目中的应用，用于管理组件间的复杂数据流。

摘要由CSDN通过智能技术生成

props (父传子)

通过 props 将数据在组件树中进行⾃上⽽下的传递。

<jack :money="count" :obj="myobj"></jack>
//父组件传值money和obj

export default {
  // props: ['money']
  props: { //子组件props接收
    money: {  //接收money
      type: Number,
      default: 1,
    },
    obj: {   //接收obj
      type: Object,
      default: () => {
        return {
          name: 'zs',
          age: 18,
        };
      },
    },
  },
};

$emit(子传父)

通过 $emit 和 @ 来作信息的向上传递。

this.$emit('add-action', 参数1, 参数2, ...)
//子组件$emit传值

<jack @add-action="fatherFn"></jack>
//父组件@接收

eventBus 事件总线 (兄弟组件)

可通过 EventBus 进⾏信息的发布与订阅。 (创建一个都能访问到的事件总线)

main.js

Vue.prototype.$eventBus = new Vue(); // this.$eventBus

// A组件中, 监听 bus的事件
this.$eventBus.$on('事件名', function(参数1, 参数2, ...) {
	...
})

// B组件中, 触发 bus的事件
this.$eventBus.$emit('事件名', 参数1, 参数2, ...)

$children $parent $refs

(1) $children

父组件中, $children 返回的是一个组件集合，如果你能清楚的知道子组件的顺序，你也可以使用下标来操作

// 父组件中
<template>
  <div class="hello_world">
    <com-a></com-a>
    <com-b></com-b>
  </div>
</template>

this.$children[0] => <com-a></com-a>

this.$children[1] => <com-b></com-b>

(2) $parent

子组件中, this.$parent 指向父组件

this.$parent.xxx = 200

this.$parent.fn()

(3) $refs

通过添加 ref 和 $refs 配合, 也可以很方便的获取子组件, 访问调用子组件的属性或方法

// 父组件中
<template>
  <div class="hello_world">
    <com-a ref="coma"></com-a> // this.$refs.coma.count = 200
    <com-b ref="comb"></com-b> // this.$refs.comb.addFn()
  </div>
</template>

this.$refs.coma => <com-a></com-a>

this.$refs.comb => <com-b></com-b

provide inject

注意 provide 不是响应式的，要实现响应式，传递的数据必须是 data 中的数据（对象格式）

成对出现：provide 和 inject 是成对出现的

作用：用于父组件向子孙组件传递数据

使用方法：

provide 在父组件中, 返回要传给下级的数据
inject 在需要使用这个数据的子孙组件中注入数据。（不论组件层次有多深）

父组件

export default {
  provide() {
    return {
      value: this.value, // 共享给子孙组件的数据
    };
  },
  data() {
    return {
      value: '父组件的数据',
      money: 100,
    };
  },
};

子孙组件

export default {
    inject: ['value'],
    props: {
        ...
    }
}

$attrs $listeners

在 Vue 2.4 版本中加⼊的 $attrs 和 $listeners 可以用来作为跨级组件之间的通信机制。 (父传孙)

父组件

<template>
  <div>
    <my-child1 :money="100" desc='你好哇' @test1="fn1" @test2="fn2"></my-child1>
  </div>
</template>

子组件

<template>
  <div class="my-child1">
    <!-- $attrs => { "money": 100, "desc": "你好哇" } -->
    <div>{{ $attrs }}</div>
    <my-child2 v-bind="$attrs" v-on="$listeners"></my-child2>
  </div>
</template>

<script>
import MyChild2 from './my-child2';
export default {
  created() {
    console.log(this.$listeners);
  },
  components: {
    MyChild2,
  },
};
</script>

孙组件

<template>
  <div>
    我是child2 - {{ money }} - {{ desc }}
    <button @click="clickFn">按钮</button>
  </div>
</template>

<script>
export default {
  props: ['money', 'desc'],
  methods: {
    clickFn () {
      this.$emit('test1', '嘎嘎')
      this.$emit('test2', '嘿嘿')
    }
  }
}
</script>