Vue中父子组件通信

小鱼儿 2024-02-05 23:57 14阅读 0赞

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

#### 本文内容 ####

*  ⭐ 专栏简介
 *  Vue中父子组件通信
 *   *  1. Props
     *   *  父组件：
         *  子组件：
     *  2. 自定义事件
     *   *  子组件：
         *  父组件：
     *  3. 使用 \`v-model\`
     *   *  子组件：
         *  父组件：
     *  4. 使用\`$refs\`
     *   *  子组件：
         *  父组件：
     *  5. 使用 EventBus
 *  ⭐ 写在最后

## ⭐ 专栏简介 ##

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

![在这里插入图片描述][a5e6aa42c7844913a798169ab9707994.png_pic_center]

--------------------

## 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世界中游刃有余。如果文中出现有瑕疵的地方各位可以通过主页的左侧联系我指正，我们一起进步，

[a5e6aa42c7844913a798169ab9707994.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/707cf1a6f0344e67be5d9168d7e29d67.png