Vue.js组件通信详解

Vue.js组件通信详解

在Vue.js应用中，组件间的通信是构建复杂应用的关键。本文将详细介绍各种通信方式。

Props向下传递

父组件向子组件传递数据：

<!-- 父组件 -->
<template>
  <child-component :message="parentMessage" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

事件向上传递

子组件向父组件传递数据：

<!-- 子组件 -->
<template>
  <button @click="sendToParent">发送消息</button>
</template>

<script>
export default {
  methods: {
    sendToParent() {
      this.$emit('child-event', 'Hello from child');
    }
  }
}
</script>

<!-- 父组件接收 -->
<child-component @child-event="handleChildEvent" />

Provide/Inject

跨层级组件通信：

// 父组件
export default {
  provide() {
    return {
      theme: 'dark',
      user: this.currentUser
    }
  }
}

// 子组件
export default {
  inject: ['theme', 'user'],
  mounted() {
    console.log(this.theme); // 'dark'
  }
}

掌握组件通信是Vue.js开发的重要技能。