Vue3 组件通信：深入剖析数据传递与交互的艺术

2023-11-22 14:32:34

Vue3 组件通信：实现现代前端开发的基石

在现代前端开发中，构建复杂应用程序需要模块化和可重用性，而组件化编程成为实现这一目标的必备技能。Vue3，作为一款强大的前端框架，为我们提供了多种组件通信方式，本文将深入探讨这些通信机制，帮助您打造更具交互性和可维护性的应用程序。

Props：传递数据，实现数据共享

Props 是 Vue3 中最常见的组件通信方式，它允许父组件向子组件传递数据，实现数据共享。在父组件中，通过 props 属性声明要传递的数据，而在子组件中，通过 props 属性接收这些数据。

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

<script>
export default {
  data() {
    return {
      message: 'Hello from parent!'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <p>{{ message }}</p>
</template>

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

Emit：反馈数据，实现事件触发

Emit 是 Vue3 中另一种常用的组件通信方式，它允许子组件向父组件传递数据，实现事件触发。在子组件中，通过 emit 方法触发一个事件，并将数据作为参数传递给该事件。而在父组件中，通过 @<事件名>=“处理函数” 监听子组件发出的事件，并在处理函数中接收数据。

<!-- 子组件 -->
<template>
  <button @click="done">Done</button>
</template>

<script>
export default {
  methods: {
    done() {
      this.$emit('done', 'Task completed!');
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <ChildComponent @done="handleDone" />
</template>

<script>
export default {
  methods: {
    handleDone(message) {
      console.log(`Task completed: ${message}`);
    }
  }
}
</script>

Provide/Inject：共享数据，跨越组件边界

Provide/Inject 是 Vue3 中一种较高级的组件通信方式，它允许跨组件共享数据，而不必层层传递数据。在提供数据的组件中，通过 provide 方法提供数据，而在需要使用数据的组件中，通过 inject 方法注入数据。

<!-- 提供数据的组件 -->
<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
export default {
  provide() {
    return {
      message: 'Hello from parent!'
    }
  }
}
</script>

<!-- 需要使用数据的组件 -->
<template>
  <p>{{ message }}</p>
</template>

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

Expose/Ref：调用方法，实现组件交互

Expose/Ref 是 Vue3 中一种较新的组件通信方式，它允许父组件调用子组件的方法。在子组件中，通过 expose 方法公开需要调用的方法，而在父组件中，通过 ref 属性获取子组件的实例，然后就可以调用子组件的方法了。

<!-- 子组件 -->
<template>
  <button @click="greet">Greet</button>
</template>

<script>
export default {
  methods: {
    greet() {
      console.log('Hello from child!');
    }
  },
  expose: ['greet']
}
</script>

<!-- 父组件 -->
<template>
  <ChildComponent ref="child" />

  <button @click="greetChild">Greet Child</button>
</template>

<script>
export default {
  methods: {
    greetChild() {
      this.$refs.child.greet();
    }
  }
}
</script>