Vue中的子组件与父组件通信|极客教程

Vue中的子组件与父组件通信

在Vue中，通常将一个页面拆分为多个组件来实现复杂的页面逻辑和交互。而在这些组件之间通信的方式有很多种，其中父组件和子组件之间的通信尤为重要。本文将详细介绍Vue中子组件与父组件之间的通信方式，并给出具体的示例代码。

Props

在Vue中，父组件可以通过props属性向子组件传递数据。子组件可以接收这些数据并进行相应的渲染或逻辑处理。以下是一个简单的示例：

<!-- ParentComponent.vue -->
<template>
  <ChildComponent :message="message" />
</template>

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

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

<!-- ChildComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

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

在上面的示例中，父组件ParentComponent向子组件ChildComponent传递了一个名为message的prop，并将其值设置为'Hello from parent component!'。子组件接收到message prop并将其显示在页面上。

$emit

除了父组件向子组件传递数据外，子组件也可以向父组件发送消息。Vue提供了$emit方法来实现这一功能。以下是一个示例：

<!-- ChildComponent.vue -->
<template>
  <button @click="sendMessage">Send Message to Parent</button>
</template>

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

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent @message="handleMessage" />
    <div>{{ receivedMessage }}</div>
  </div>
</template>

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

export default {
  data() {
    return {
      receivedMessage: ''
    },
  },
  methods: {
    handleMessage(message) {
      this.receivedMessage = message;
    },
  },
  components: {
    ChildComponent
  }
}
</script>

在上面的示例中，子组件ChildComponent通过$emit方法向父组件发送了一个名为message的事件，并携带了消息'Hello from child component!'。父组件ParentComponent监听message事件，并在收到消息后将其显示在页面上。

$refs

除了以上两种方式外，Vue还提供了$refs属性来实现父组件访问子组件的功能。通过在子组件上添加ref属性，父组件可以直接访问子组件的属性和方法。以下是一个示例：

<!-- ParentComponent.vue -->
<template>
  <div>
    <button @click="showMessage">Show Message from Child</button>
    <ChildComponent ref="childRef" />
  </div>
</template>

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

export default {
  methods: {
    showMessage() {
      const message = this.$refs.childRef.message;
      alert(message);
    },
  },
  components: {
    ChildComponent
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

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

在上面的示例中，父组件ParentComponent通过ref属性引用了子组件ChildComponent，并可以通过this.$refs.childRef直接访问子组件的属性和方法。在点击按钮后，父组件将弹出子组件中的消息。

EventBus

除了以上几种方法外，还可以使用EventBus来实现任意组件之间的通信。EventBus实际上是一个全局的Vue实例，可以用来发布和订阅事件。以下是一个示例：

// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

<!-- ParentComponent.vue -->
<template>
  <div>
    <button @click="sendMessage">Send Message to Child</button>
  </div>
</template>

<script>
import { EventBus } from './EventBus';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Hello from parent component!');
    }
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script>
import { EventBus } from './EventBus';

export default {
  data() {
    return {
      message: ''
    }
  },
  created() {
    EventBus.$on('message', message => {
      this.message = message;
    });
  }
}
</script>

在上面的示例中，我们定义了一个全局的EventBus，并在父组件和子组件中分别使用$emit和$on来实现消息的发送和接收。当父组件点击按钮后，子组件将接收到消息并显示在页面上。