vue3中组件间如何传值

前言

在Vue 3中，组件间传值是非常常见的需求之一。传值可以是从父组件向子组件传递，也可以是从子组件向父组件传递，还可以是兄弟组件之间传递。Vue 3提供了多种方式来满足这些需求，包括props、$emit、provide/inject和全局事件总线等。在本篇回答中，我将为您介绍和示范其中的几种方法。

使用props来传递数据

props是Vue组件中最常用的方式，用于从父组件向子组件传递数据。在父组件中通过props属性将数据传递给子组件，在子组件中通过props选项接收数据。以下是一个示例：

// 父组件
<template>
  <div>
    <ChildComponent :message="message" />
  </div>
</template>

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

export default {
  data() {
    return {
      message: 'Hello Vue 3!'
    };
  },
  components: {
    ChildComponent
  }
};
</script>

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message']
};
</script>

使用$emit触发事件

如果需要从子组件向父组件传递数据，可以使用$emit方法来触发一个自定义事件，并将数据作为参数传递。父组件可以监听该自定义事件，并在事件触发时接收数据。以下是一个示例：

// 子组件
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from ChildComponent');
    }
  }
};
</script>

// 父组件
<template>
  <div>
    <ChildComponent @message="receiveMessage" />
  </div>
</template>

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

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

使用provide/inject实现跨层级传递

在一些特殊情况下，可能需要在跨层级的组件中传递数据。Vue 3提供了provide和inject来实现这一需求。父组件通过provide选项提供数据，然后在子孙组件中通过inject选项接收数据。以下是一个示例：

// 祖父组件
<template>
  <div>
    <GrandChildComponent />
  </div>
</template>

<script>
export default {
  provide: {
    message: 'Hello from GrandParentComponent'
  }
};
</script>

// 父组件
<template>
  <div>
    <ChildComponent />
  </div>
</template>

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

export default {
  setup() {
    const message = inject('message');
    console.log(message); // 输出 'Hello from GrandParentComponent'
  }
};
</script>

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

export default {
  setup() {
    const message = inject('message');
    return {
      message
    };
  }
};
</script>

总结

通过props、$emit、provide/inject等方式，Vue 3提供了灵活可靠的方法来实现组件间的数据传递。根据实际需求选择合适的方式可以让组件间的通信更加简洁高效，提升开发效率。