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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/25061.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

spring boot使用elasticsearch分词，排序，分页，高亮简单示例

spring boot使用elasticsearch分词，排序，分页，高亮简单示例

目录 1. 创建ES实体2. 创建查询实体3. 查询方法实现3.1 核心代码3.2 构建查询条件3.2.1 关键词分词 3.3 高亮处理 4.完整查询代码展示 记&#xff0c;写一个简单的es分词demo,es版本6.8.12 如果使用es7有些方法可能会有所改变&#xff0c;请参考7的文档 es安装教程&#xff1a;…
阅读更多...
隔离驱动芯片SLMi332兼容光耦隔离驱动器时的注意事项

隔离驱动芯片SLMi332兼容光耦隔离驱动器时的注意事项

数明深力科SLMi33x系列SLMi332是一款兼容光耦带DESAT保护功能的IGBT/SiC隔离驱动器。内置快速去饱和(DESAT) 故障检测功能、米勒钳位功能、漏极开路故障反馈、软关断功能以及可选择的自恢复模式&#xff0c;兼容光耦隔离驱动器。 SLMi33x系列SLMi332的DESAT阈值为6.5V&#xf…
阅读更多...
大数据---聚类分析概述及聚类评估

大数据---聚类分析概述及聚类评估

聚类概述: 什么是聚类&#xff1f; 是把数据对象集合按照相似性划分成多个子集的过程。每个子集是一个簇&#xff08;cluster&#xff09;&#xff0c;分类的最终效果&#xff1a;使得簇中的对象彼此相似&#xff0c;但与其他簇中的对象相异。聚类是无监督学习&#xff0c;因…
阅读更多...
缓存被穿透了怎么办？

缓存被穿透了怎么办？

首先来了解几个概念&#xff1a; 缓存穿透&#xff1a;大量请求根本不存在的key 缓存雪崩&#xff1a;redis中大量key集体过期 缓存击穿&#xff1a;redis中一个热点key过期&#xff08;大量用户访问该热点key&#xff0c;但是热点key过期&#xff09; 穿透解决方案 对空值…
阅读更多...
如何有效和快速清理C盘

如何有效和快速清理C盘

电脑在运行过程中会产生磁盘碎片&#xff0c;时间一长垃圾文件就会越多。而且我们平常不敢乱清理C盘中的文件&#xff0c;以免因为误删导致系统出现故障&#xff0c;所以垃圾文件才肆意占用系统盘空间。不过我们可以选择系统自带的“磁盘清理”功能“制服”它&#xff0c;给C盘…
阅读更多...
带电更换柱上变压器（综合不停电作业法）

带电更换柱上变压器（综合不停电作业法）

一、现场复勘 1.核对工作线路双重名称、杆号及设备双重名称 2.检查杆身质量 3.检查线路装置是否符合带电作业要求 4.检查待更换变压器容量 满足旁路作业要求 5.检查气象条件 作业前进行湿度和风速的测量&#xff0c;风力大于5级或湿度大于80%时&#xff0c;不宜带电作业&…
阅读更多...
华为开源自研AI框架昇思MindSpore应用案例：Pix2Pix实现图像转换

华为开源自研AI框架昇思MindSpore应用案例：Pix2Pix实现图像转换

目录 一、环境准备1.进入ModelArts官网2.使用CodeLab体验Notebook实例 二、基础原理三、准备环节配置环境文件准备数据数据展示 四、创建网络生成器G结构定义UNet Skip Connection Block基于UNet的生成器 基于PatchGAN的判别器Pix2Pix的生成器和判别器初始化 五、训练六、推理 …
阅读更多...
SWAT模型教程

SWAT模型教程

详情点击链接&#xff1a;SWAT模型教程详情点击链接&#xff1a;SWAT模型&#xff08;建模方法、实例应用、高级进阶&#xff09; 一&#xff1a;基于网络资源的SWAT模型快速建模​ 二&#xff1a;基于遥感产品的SWAT模型率定与验证​ 三&#xff1a;基于水文响应单元&#xff…
阅读更多...
每日一题——用两个队列实现栈

每日一题——用两个队列实现栈

每日一题 用两个队列实现栈 题目链接 思路 这里主要讲怎么实现出栈StackPop操作做完用两个栈实现队列&#xff0c;我们可能会想当然的认为&#xff0c;这一题也是一个主队列&#xff0c;一个辅助队列&#xff0c;当要出队时&#xff0c;首先判断辅助队列是否为空&#xff0c;…
阅读更多...
FineBI6.0基础学习第一课 数据门户

FineBI6.0基础学习第一课 数据门户

PC端门户使用示例 首先，以管理员身份登录FineBI系统，安装数据门户，安装步骤见官网 新建一个数据门户
阅读更多...
C++中的高阶函数：以std::function优雅地实现回调

C++中的高阶函数：以std::function优雅地实现回调

C中的高阶函数&#xff1a;以std::function优雅地实现回调 1. 简介1.1 C高阶函数的概念1.2 C的std::function的功能及其重要性 2. std::function的使用2.1 std::function的定义和基本使用2.1.1 std::function的定义2.1.2 std::function的基本使用 2.2 std::function接受普通函数…
阅读更多...
Python+Yolov5人脸表情特征识别

Python+Yolov5人脸表情特征识别

程序示例精选 PythonYolov5人脸表情特征识别 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对<<PythonYolov5人脸表情特征识别>>编写代码&#xff0c;代码整洁&#xff0c;规则&am…
阅读更多...
Linux环境变量总结

Linux环境变量总结

Linux是一个多用户的操作系统。多用户意味着每个用户登录系统后&#xff0c;都有自己专用的运行环境。而这个环境是由一组变量所定义,这组变量被称为环境变量。用户可以对自己的环境变量进行修改以达到对环境的要求。 设置环境变量的方法 对所有用户生效的永久性变量 这类变…
阅读更多...
电子科技大学编译原理复习笔记（三）：控制结构

电子科技大学编译原理复习笔记（三）：控制结构

目录 前言 重点一览 语句级控制结构 单元级控制结构 四种单元级控制结构 本章小结 前言 本复习笔记基于张老师的课堂PPT&#xff0c;供自己期末复习与学弟学妹参考用。 重点一览 语句级控制结构 定义&#xff1a;用来构造各种语句执行顺序的机制 传统三种语句级控制结…
阅读更多...
【问题记录】解决vite多页应用路由改用history之后本地刷新404问题

【问题记录】解决vite多页应用路由改用history之后本地刷新404问题

当前包的版本信息&#xff1a; "vue": "^2.7.14", "vue-router": "^3.6.5" "vite": "^3.0.7", 首先&#xff0c;修改路由模式 首先&#xff0c;将之前多页项目中的某个页面路由模式改用 history &#xff0c;…
阅读更多...
【异常捕获】

【异常捕获】

异常捕获 异常概念处理错误方式 异常处理举例栈展开异常规范异常继承层次优缺点 异常 概念 异常时程序可能检测到的&#xff0c;运行时不正常的情况&#xff0c;如存储空间耗尽&#xff0c;数组越界等&#xff0c;可以预见可能发生在什么地方但不知道在什么时候发生的错误。 …
阅读更多...
mysql倒库操作遇到的问题

mysql倒库操作遇到的问题

背景&#xff1a;本地windows 10安装了mysql数据库后&#xff0c;需要把远程库的表结构和数据全部导入进来。 操作&#xff1a;导出数据库&#xff0c;导入数据库。 第一步&#xff1a;导出数据库 使用dump命令即可。 登陆mysql数据库 mysql -hhost --default-character-s…
阅读更多...
海汽集团：业财共享服务中心建设推进集团数字治理

海汽集团：业财共享服务中心建设推进集团数字治理

随着大数据时代的到来&#xff0c;数字化、信息化的财务管理方式应运而生。建立财务共享服务中心&#xff0c;走向业财一体化&#xff0c;已成为企业财务管理转型的必然趋势。 海汽集团作为全国唯一一家具有全省性客运网络的道路运输企业、海南道路运输业头部企业&#xff0c;…
阅读更多...
3. 自然语言处理NLP：具体用途（近义词类比词；情感分类；机器翻译）

3. 自然语言处理NLP：具体用途（近义词类比词；情感分类；机器翻译）

一、求近义词和类比词 1. 近义词 方法一&#xff1a;在嵌入模型后&#xff0c;可以根据两个词向量的余弦相似度表示词与词之间在语义上的相似度。 方法二&#xff1a;KNN&#xff08;K近邻&#xff09; 2. 类比词 使用预训练词向量求词与词之间的类比关系。eg&#xff1a;man&a…
阅读更多...
​Lambda表达式详解​-初遇者-很细

​Lambda表达式详解​-初遇者-很细

目录 Lambda简介 对接口的要求 Lambda 基础语法 Lambda 语法简化 Lambda 表达式常用示例 lambda 表达式引用方法 构造方法的引用 lambda 表达式创建线程 遍历集合 删除集合中的某个元素 集合内元素的排序 Lambda 表达式中的闭包问题 Lambda简介 Lambda 表达式是 JD…
阅读更多...
最新文章

Copyright @ 2022~2023