Vue.js 中的父子组件通信方式实例教程

更新时间：2023年09月27日 09:59:49 作者：stormjun

在 Vue.js 中，父子组件通信是非常重要的，在本文中，我们讨论了 Vue.js 中父子组件通信的几种方式，包括使用 props 传递数据、使用 Sync 修饰符实现双向绑定、使用自定义事件传递数据、使用 $refs 访问子组件实例以及使用 $children 和 $parent 访问父子组件实例

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

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

在这里插入图片描述

父组件向子组件传递数据

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 属性访问子组件实例，并调用子组件中的方法，向子组件传递数据。

到此这篇关于Vue.js 中的父子组件通信方式的文章就介绍到这了,更多相关Vue.js 父子组件通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

详解Vue 2.0封装axios笔记
本篇文章主要介绍了详解Vue 2.0封装axios笔记，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
这篇文章主要介绍了vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流),本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-05-05
Vue+Openlayer批量设置闪烁点的实现代码(基于postrender机制)
本篇文章给大家介绍基于postrender机制使用Vue+Openlayer批量设置闪烁点的实现代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
2021-09-09
vue实现单点登录的方式汇总
最近项目停工了，RageFrame的学习暂时告一段落，这一篇给大家分享下有关单点登录的相关知识，并提供一些demo给大家参考，对vue单点登录的实现方式感兴趣的朋友一起看看吧
2021-11-11
Vue中添加滚动事件设置的方法详解
这篇文章主要给大家介绍了关于Vue中添加滚动事件设置的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-09-09
vue实现分割验证码效果
这篇文章主要为大家详细介绍了vue实现分割验证码效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
vue3 + Ant Design 实现双表头表格的效果(横向表头+纵向表头)
这篇文章主要介绍了vue3 + Ant Design 实现双表头表格（横向表头+纵向表头）,需要的朋友可以参考下
2023-12-12
利用Vue3 (一）创建Vue CLI 项目
这篇文章主要介绍利用Vue3 创建Vue CLI 项目，下面文章内容附有官方文档链接，安装过程，需要的可以参考一下
2021-10-10
基于vue3&element-plus的暗黑模式实例详解
实现暗黑主题的方式有很多种,也有很多成型的框架可以直接使用,下面这篇文章主要给大家介绍了关于基于vue3&element-plus的暗黑模式的相关资料,需要的朋友可以参考下
2022-12-12
vue路由中前进后退的一些事儿
这篇文章主要给大家介绍了关于vue路由中前进后退的一些事儿，文中通过示例代码介绍的非常详细，对大家学习或者使用vue路由具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-05-05