Vue.js 中的父子组件通信方式

心已赠人 2023-10-12 13:46 14阅读 0赞

## Vue.js 中的父子组件通信方式 ##

在 Vue.js 中，组件是构建应用程序的基本单元。当我们在应用程序中使用组件时，组件之间的通信是非常重要的。在 Vue.js 中，父子组件通信是最常见的组件通信方式之一。在本文中，我们将讨论 Vue.js 中的父子组件通信方式，并附上代码实例。

![在这里插入图片描述][655463e2028f4482bfec7c9360d3e010.png]

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

#### Props ####

props 是 Vue.js 中父组件向子组件传递数据的一种方式。通过 props，父组件可以向子组件传递任何类型的数据，包括字符串、数字、对象、数组等等。在子组件中，props 是只读的，不能直接修改，只能通过事件的方式向父组件发送数据。

下面是一个使用 props 传递数据的示例：

<template>
      <div>
        <my-child :message="parentMessage"></my-child>
      </div>
    </template>
    
    <script>
    import MyChild from './MyChild.vue';
    
    export default {
          
      components: {
          
        MyChild,
      },
      data() {
          
        return {
          
          parentMessage: '这是来自父组件的消息',
        };
      },
    };
    </script>

<template>
      <div>
        <p>{
       { message }}</p>
      </div>
    </template>
    
    <script>
    export default {
          
      props: {
          
        message: String,
      },
    };
    </script>

在上面的示例中，父组件通过 props 将 `parentMessage` 传递给子组件 `MyChild`，并将其命名为 `message`。在子组件中，我们可以通过 `props` 对象来声明 `message` 属性，然后在模板中使用它来渲染数据。

#### Sync 修饰符 ####

除了 props 之外，Vue.js 还提供了一个 Sync 修饰符，可以通过它来实现双向数据绑定。Sync 修饰符实际上是一个语法糖，它将父组件向子组件传递数据和子组件向父组件发送数据的操作包装在一起。

下面是一个使用 Sync 修饰符的示例：

<template>
      <div>
        <my-child :message.sync="parentMessage"></my-child>
      </div>
    </template>
    
    <script>
    import MyChild from './MyChild.vue';
    
    export default {
          
      components: {
          
        MyChild,
      },
      data() {
          
        return {
          
          parentMessage: '这是来自父组件的消息',
        };
      },
    };
    </script>

<template>
      <div>
        <input v-model="message" @input="$emit('update:message', message)" />
      </div>
    </template>
    
    <script>
    export default {
          
      props: {
          
        message: String,
      },
    };
    </script>

在上面的示例中，父组件通过 `:message.sync` 将 `parentMessage` 传递给子组件 `MyChild`，并使用 `v-model` 指令将子组件的 `message` 属性与一个输入框进行双向绑定。在子组件中，我们使用 `@input` 事件将输入框的值发送给父组件，实现双向数据绑定。

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

#### 自定义事件 ####

除了 props 之外，子组件还可以通过自定义事件向父组件传递数据。在子组件中，我们可以使用 `$emit` 方法触发一个自定义事件，并将数据作为参数传递给父组件。父组件可以通过 `v-on` 指令监听子组件的自定义事件，并在事件处理函数中获取子组件传递的数据。

下面是一个使用自定义事件传递数据的示例：

<template>
      <div>
        <my-child @child-click="handleChildClick"></my-child>
      </div>
    </template>
    
    <script>
    import MyChild from './MyChild.vue';
    
    export default {
          
      components: {
          
        MyChild,
      },
      methods: {
          
        handleChildClick(data) {
          
          console.log('从子组件传递过来的数据:', data);
        },
      },
    };
    </script>

<template>
      <div>
        <button @click="handleClick">点击我向父组件传递数据</button>
      </div>
    </template>
    
    <script>
    export default {
          
      methods: {
          
        handleClick() {
          
          this.$emit('child-click', '这是来自子组件的消息');
        },
      },
    };
    </script>

在上面的示例中，子组件 `MyChild` 中定义了一个按钮，并在按钮的 `click` 事件中触发了一个自定义事件 `child-click`，并将数据 `'这是来自子组件的消息'` 作为参数传递给父组件。父组件通过 `@child-click` 指令监听子组件的自定义事件，并在事件处理函数中打印子组件传递的数据。

#### $refs ####

除了自定义事件之外，子组件还可以通过 `$refs` 属性来访问父组件，从而向父组件传递数据。在父组件中，我们可以通过 `ref` 属性给子组件命名，然后在父组件中通过 `$refs` 属性访问子组件实例，并调用子组件中的方法或访问子组件中的数据。

下面是一个使用 `$refs` 传递数据的示例：

<template>
      <div>
        <my-child ref="child"></my-child>
        <button @click="handleClick">点击我向子组件传递数据</button>
      </div>
    </template>
    
    <script>
    import MyChild from './MyChild.vue';
    
    export default {
          
      components: {
          
        MyChild,
      },
      methods: {
          
        handleClick() {
          
          this.$refs.child.handleParentClick('这是来自父组件的消息');
        },
      },
    };
    </script>

<template>
      <div>
        <p>{
       { message }}</p>
      </div>
    </template>
    
    <script>
    export default {
          
      data() {
          
        return {
          
          message: '',
        };
      },
      methods: {
          
        handleParentClick(data) {
          
          this.message = data;
        },
      },
    };
    </script>

在上面的示例中，父组件中通过 `ref` 属性给子组件命名为 `child`。在父组件中，我们通过 `$refs.child` 访问 `MyChild` 组件实例，并调用子组件中的 `handleParentClick` 方法，将数据 `'这是来自父组件的消息'` 传递给子组件。在子组件中，我们将传递过来的数据赋值给 `message` 属性，然后在模板中渲染出来。

### 父子组件之间的访问 ###

在 Vue.js 中，父组件可以通过 `$children` 属性访问它的所有子组件实例，而子组件可以通过 `$parent` 属性访问它的父组件实例。

下面是一个示例：

<template>
      <div>
        <my-child></my-child>
        <my-child></my-child>
        <button @click="handleClick">点击我访问子组件</button>
      </div>
    </template>
    
    <script>
    import MyChild from './MyChild.vue';
    
    export default {
          
      components: {
          
        MyChild,
      },
      methods: {
          
        handleClick() {
          
          console.log(this.$children);
        },
      },
    };
    </script>

<template>
      <div>
        <p>{
       { message }}</p>
      </div>
    </template>
    
    <script>
    export default {
          
      data() {
          
        return {
          
          message: '这是来自子组件的消息',
        };
      },
      created() {
          
        console.log(this.$parent);
      },
    };
    </script>

在上面的示例中，父组件中定义了两个子组件 `MyChild`。在父组件中，我们通过 `$children` 属性访问所有子组件，并在点击按钮时打印所有子组件实例。在子组件中，我们在 `created` 钩子函数中访问了父组件实例，并在模板中渲染出了一个消息。

### 总结 ###

在 Vue.js 中，父子组件通信是非常重要的。在本文中，我们讨论了 Vue.js 中父子组件通信的几种方式，包括使用 props 传递数据、使用 Sync 修饰符实现双向绑定、使用自定义事件传递数据、使用 `$refs` 访问子组件实例以及使用 `$children` 和 `$parent` 访问父子组件实例。这些技术可以帮助我们更好地组织和管理应用程序中的组件，并提高组件之间的交互性。

在实际开发中，我们可以根据具体的业务需求选择合适的技术来实现父子组件通信。如果需要向子组件传递静态数据，可以使用 props；如果需要实现双向数据绑定，可以使用 Sync 修饰符；如果需要向父组件传递数据，可以使用自定义事件；如果需要访问子组件实例，可以使用 `$refs`，如果需要访问父子组件实例，可以使用 `$children` 和 `$parent`。

在下面的代码示例中，我们将展示如何使用 props、自定义事件和 $refs 这三种方式实现父子组件之间的通信。

<template>
      <div>
        <my-child :message="parentMessage" @child-click="handleChildClick" ref="child"></my-child>
        <button @click="handleClick">点击我向子组件传递数据</button>
      </div>
    </template>
    
    <script>
    import MyChild from './MyChild.vue';
    
    export default {
          
      components: {
          
        MyChild,
      },
      data() {
          
        return {
          
          parentMessage: '这是来自父组件的消息',
        };
      },
      methods: {
          
        handleChildClick(data) {
          
          console.log('从子组件传递过来的数据:', data);
        },
        handleClick() {
          
          this.$refs.child.handleParentClick('这是来自父组件的消息');
        },
      },
    };
    </script>

<template>
      <div>
        <p>{
       { message }}</p>
        <button @click="handleClick">点击我向父组件传递数据</button>
      </div>
    </template>
    
    <script>
    export default {
          
      props: {
          
        message: String,
      },
      methods: {
          
        handleClick() {
          
          this.$emit('child-click', '这是来自子组件的消息');
        },
        handleParentClick(data) {
          
          console.log('从父组件传递过来的数据:', data);
        },
      },
    };
    </script>

在上面的示例中，父组件通过 props 向子组件传递数据，并在子组件中使用自定义事件向父组件传递数据。同时，父组件还使用 $refs 属性访问子组件实例，并调用子组件中的方法，向子组件传递数据。

[655463e2028f4482bfec7c9360d3e010.png]: https://img-blog.csdnimg.cn/655463e2028f4482bfec7c9360d3e010.png