Vue中父子组件通信

聚沙成塔·每天进步一点点

? 专栏简介

Vue学习之旅的奇妙世界 欢迎大家来到 Vue 技能树参考资料专栏！创建这个专栏的初衷是为了帮助大家更好地应对 Vue.js 技能树的学习。每篇文章都致力于提供清晰、深入的参考资料，让你能够更轻松、更自信地理解和掌握 Vue.js 的核心概念和技术。订阅这个专栏，让我们一同踏上更深入的 Vue学习之旅！为你的前端技能树添砖加瓦！

---

Vue中父子组件通信

在Vue中，父子组件之间的通信是常见的场景。Vue提供了多种方式来实现父子组件之间的数据传递和通信。以下是一些常用的方法：

1. Props

Props 是一种父组件向子组件传递数据的方式。父组件通过属性的方式将数据传递给子组件，子组件可以通过定义 props 来接收这些数据。

父组件：

<template>
  <div>
    <child-component :messageFromParent="message"></child-component>
  </div>
</template>

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

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

子组件：

<template>
  <div>
    <p>{{ messageFromParent }}</p>
  </div>
</template>

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

2. 自定义事件

父组件可以通过在子组件上绑定自定义事件，并在子组件中使用 $emit 方法触发该事件，从而实现子组件向父组件通信。

子组件：

<template>
  <button @click="sendMessage">Send Message to Parent</button>
</template>

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

父组件：

<template>
  <div>
    <child-component @messageToParent="receiveMessage"></child-component>
    <p>{{ messageFromChild }}</p>
  </div>
</template>

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

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

3. 使用 v-model

v-model 可以用于在父组件和子组件之间建立双向绑定关系，使得父组件可以直接修改子组件的值。

子组件：

<template>
  <input :value="message" @input="$emit('update:message', $event)" />
</template>

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

父组件：

<template>
  <div>
    <child-component v-model="message"></child-component>
    <p>{{ message }}</p>
  </div>
</template>

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

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

这些方法都可以根据具体场景选择，根据需求和数据流方向灵活使用。 Props 适用于父传子，自定义事件适用于子传父，v-model 可以实现双向数据绑定。

除了上述提到的Props、自定义事件和v-model，还有一些其他在Vue中实现父子组件通信的方式，具体取决于开发者的需求和项目的复杂性：

4. 使用$refs

通过$refs可以在父组件中访问子组件的实例，从而直接调用子组件的方法或访问其数据。

子组件：

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

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

父组件：

<template>
  <div>
    <child-component ref="childRef"></child-component>
    <p>{{ $refs.childRef.message }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
};
</script>

5. 使用 EventBus

EventBus 是一种通过中央事件总线来进行组件之间通信的方式，通常通过一个空的 Vue 实例作为事件中心。

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

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

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

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

// 父组件
<template>
  <div>
    <p>{{ messageFromChild }}</p>
  </div>
</template>

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

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

这些方式都提供了不同的选择，具体使用哪种方式取决于项目的需求和开发者的偏好。在选择时需要考虑组件之间的关系、数据流的方向以及通信的复杂性。

---

? 写在最后

欢迎来到《Vue技能树专栏》！本专栏旨在帮助您全面深入地掌握Vue.js，一款现代、灵活且强大的JavaScript框架。无论您是初学者还是有一定经验的开发者，这里都将为您提供详细的指导、实用的技巧以及深入的理解，助您在Vue.js世界中游刃有余。如果文中出现有瑕疵的地方各位可以通过主页的左侧联系我指正，我们一起进步，