vue组件中的各种通信

Vue 组件之间的通信主要有以下几种方式：

1. Props 和 Events

父组件通过 props 将数据传递给子组件，子组件通过 events 将数据传递给父组件。这种方式适用于父子组件之间的通信。

2. $emit 和 $on

使用 $emit 方法触发一个事件，并通过 $on 方法监听这个事件，从而实现组件之间的通信。这种方式适用于非父子组件之间的通信。

3. Vuex

Vuex 是一个专门为 Vue.js 设计的状态管理库，它提供了一个集中式的存储管理应用的所有组件的状态，并通过 actions、mutations、getters 等方法来实现组件之间的通信。

4. $parent 和 $children

可以通过 $parent 和 $children 属性访问组件的父组件和子组件。这种方式适用于组件层级比较简单的情况。

5. $refs

可以通过 $refs 属性访问组件实例，从而实现组件之间的通信。这种方式适用于需要访问子组件的 DOM 元素的情况。

相关问题

vue中父子组件通信

在Vue中，父子组件之间的通信主要有三种方式：

1. Props: 通过props将数据从父组件传递到子组件。

2. Event Bus: 创建一个事件总线，父组件通过触发事件来告诉子组件需要发生什么。

3. Provide / Inject: 在父组件中使用provide选项提供数据，在子组件中使用inject选项来访问数据。

这三种方式都可以在不同场景下使用，具体使用哪种方式取决于具体的需求。

vue3中父子组件通信

在Vue3中，父子组件通信有以下三种方式：

1. 父组件给子组件传参：

父组件中通过props向子组件传递数据，子组件中通过props接收数据。

2. 子组件调用父组件的方法：

父组件中通过v-on绑定一个方法，子组件中通过$emit触发这个方法，并传递数据。

3. 子组件暴露属性给父组件：

子组件中通过defineExpose暴露属性或方法，父组件中通过ref获取子组件实例，再调用子组件的属性或方法。

以下是三种方式的代码示例：

1. 父组件给子组件传参：

父组件中：

<template>
  <child-component :message="msg"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      msg: 'Hello World',
    };
  },
};
</script>

子组件中：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: String,
  },};
</script>

2. 子组件调用父组件的方法：

父组件中：

<template>
  <child-component @change-visible="handleChangeVisible"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleChangeVisible(visible) {
      console.log(visible);
    },
  },
};
</script>

子组件中：

<template>
  <button @click="handleClick">Change Visible</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('change-visible', false);
    },
  },
};
</script>

3. 子组件暴露属性给父组件：

子组件中：

<template>
  <div>{{ message }}</div>
</template>

<script>
import { defineExpose } from 'vue';

export default {
  setup() {
    const message = 'Hello World';

    defineExpose({
      message,
    });

    return {
      message,
    };
  },
};
</script>

父组件中：

<template>
  <child-component ref="child"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  mounted() {
    console.log(this.$refs.child.message);
  },
};
</script>