vue-组件传值总结

Vue.js中实现组件间传值的方法有多种。以下是几种常见的传值方式的详细讲解和示例:

1.父组件向子组件传值(props)

  • 父组件通过props向子组件传递数据,子组件可以接收并使用这些数据。
  • 当父组件重新渲染时,数据会被覆盖。如果子组件内要修改的话推荐使用$emit
  • 声明和传递数据:在父组件模板中,使用v-bind指令(也可简写为:)将需要传递的数据绑定到子组件的prop上。例如,若父组件有一个message数据属性,希望传递给子组件,可以这样写:。这里my-prop是子组件暴露出来的一个prop名称。
  • 接收和处理数据:在子组件中,需要声明一个props选项来接收父组件传递过来的数据。对于上面的例子,子组件可以这样定义: props: [‘myProp’] ;或者指定具体的类型:props: {myProp: String}
  • 示例
    <!-- 父组件代码 -->
    <template><div><child :inputName="name"></child></div>
    </template>
    <script>
    import child from './child.vue';
    export default {components: {child},data() {return {name: '来自父组件的数据'};}
    }
    </script><!-- 子组件代码:child.vue -->
    <template><div>{{ inputName }} <!-- 显示:'来自父组件的数据'--></div>
    </template>
    <script>
    export default {props: {inputName: String,required: true}
    }
    </script>
    

2.子组件向父组件传值($emit)

  • 子组件通过$emit触发自定义事件,并在父组件中监听这些事件来接收数据。
  • 适用于子组件向父组件传递消息或数据。
  • 子组件通过 $ emit 触发一个自定义事件,并传递数据作为参数,而父组件则通过监听这个事件来接收和处理数据。在子组件中,需要先在data中声明要传递的数据,然后通过methods定义一个本地方法来触发 $ emit。这个方法通常绑定在某个事件上,比如点击事件。当事件被触发时,$ emit会执行并发送数据到父组件。
  • 示例
    <!-- 子组件代码:child.vue -->
    <template><button @click="notify">点击我</button>
    </template>
    <script>
    export default {methods: {notify() {this.$emit('dataPassed', '来自子组件的数据');}}
    }
    </script><!-- 父组件代码 -->
    <template><div><child @dataPassed="receiveData"></child></div>
    </template>
    <script>
    import child from './child.vue';
    export default {components: {child},methods: {receiveData(data) {console.log(data); // 输出:来自子组件的数据}}
    }
    </script>
    

3.非父子组件间的传值(事件总线)

  • 使用一个空的Vue实例作为中央事件总线(事件中心),用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信。
  • 优势:虽然父子组件之间可以通过props和事件进行直接通信,但非父子组件间的通信则要复杂得多。在这种情况下,中央事件总线提供了一种简便、轻量级的方案。它允许不同组件之间通过一个公共的Vue实例进行交互,从而避免了复杂的数据传递链路。
  • 示例
    <!-- 事件总线 -->
    <script>
    export const EventBus = new Vue();
    </script><!-- 组件A -->
    <template><button @click="sendData">发送数据</button>
    </template>
    <script>
    import { EventBus } from './eventBus.js';
    export default {methods: {sendData() {EventBus.$emit('send', '来自组件A的数据');}}
    }
    </script><!-- 组件B -->
    <template><div>接收到的数据:{{ receivedData }}</div>
    </template>
    <script>
    import { EventBus } from './eventBus.js';
    export default {data() {return {receivedData: ''};},created() {EventBus.$on('send', data => {this.receivedData = data;});}
    }
    </script>
    

4.直接访问子组件(ref)

  • 使用ref为子组件指定一个引用ID,然后在父组件中通过this.$refs直接访问子组件的公共属性和方法。
  • 使用ref为子组件指定引用ID的方法简单明了:在子组件标签中添加ref属性,并为其赋予一个唯一的ID。在父组件中,通过this.$refs.{ID} 的形式来访问该子组件的实例。如果操作的是DOM元素,那么获取到的就是相应的DOM节点。
  • 注意:虽然它主要应用于父子组件之间,但其灵活性和简洁性使得在特定情况下非常有效。需要注意的是,过度依赖这种方法可能会导致代码难以维护和测试,因此建议仅在必要时使用
  • 示例
    <!-- 父组件 -->
    <template><div><button @click="getChildData">获取子组件数据</button><child ref="myChild"></child></div>
    </template>
    <script>
    import child from './child.vue';
    export default {components: {child},methods: {getChildData() {console.log(this.$refs.myChild.childData); // 访问子组件的公共属性}}
    }
    </script><!-- 子组件:child.vue -->
    <template><div>我是子组件</div>
    </template>
    <script>
    export default {data() {return {childData: '这是子组件的内部数据'};}
    }
    </script>
    

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python Opencv鼠标回调

使用 OpenCV 的 cv2.setMouseCallback() 方法来捕捉鼠标事件&#xff0c;并实现以下功能&#xff1a; 实时在鼠标指针附近显示其位置的像素坐标。通过左键双击&#xff0c;将像素坐标记录到数组中。通过右键点击&#xff0c;取消上一次添加的坐标。 下面是实现代码的示例&…

NLP从零开始------文本中阶处理之序列到序列模型(完整版)

1. 序列到序列模型简介 序列到序列( sequence to sequence, seq2seq) 是指输入和输出各为一个序列(如一句话) 的任务。本节将输入序列称作源序列&#xff0c;输出序列称作目标序列。序列到序列有非常多的重要应用&#xff0c; 其中最有名的是机器翻译( machine translation), 机…

WebRTC协议下的视频汇聚融合技术:EasyCVR视频技术构建高效视频交互体验

视频汇聚融合技术是指将来自不同源、不同格式、不同网络环境的视频流进行集中处理、整合和展示的技术。随着视频监控、远程会议、在线教育、直播娱乐等领域的快速发展&#xff0c;视频数据的规模急剧增长&#xff0c;对视频处理能力和效率提出了更高要求。视频汇聚融合技术通过…

思科IP访问控制列表3

#网络安全技术实现# #任务三扩展访问控制列表的控制3# #1配置计算机的IP 地址、子网掩码和网关 #2配置Switch-A的主机名称&#xff0c;创建vlan 10,20,30,并将Fa0/1划入vlan 10&#xff0c;Fa0/2划入vlan 20&#xff0c;G0/1划入vlan 30 Switch(config)#hostname Switch-A S…

「OC」iOS事件处理流程

「OC」初识iOS事件处理流程 文章目录 「OC」初识iOS事件处理流程触摸事件触摸事件的响应周期事件 响应者UIEventUITouchUIResponder 触摸流程系统响应阶段APP响应阶段寻找最佳响应者 构成响应链 寻找最佳响应者和响应链的区别总结参考资料 触摸事件 iOS的事件有好几种&#xf…

DriveLM的baseline复现

DriveLM是一篇很有意思的工作&#xff0c;把自动驾驶跟MLLM结合到一起了&#xff0c;实现端到端的感知or决策规划。 Repo&#xff1a;https://github.com/OpenDriveLab/DriveLM 该工作是基于nuScenes数据集做的&#xff0c;官方paper里给出了数据的具体构建方式&#xff0c;感…

ElasticSearch-关联关系

Elasticsearch并不擅长处理关联关系&#xff0c;一般会采用以下四种方法处理关联 对象类型嵌套对象 (Nested Object)父子关联关系 (Parent / Child)应用端关联 对象类型 在每一博客的文档中都保留作者的信息 如果作者信息发生变化&#xff0c;需要修改相关的博客文档 包含对象…

SpringBoot依赖之Spring Boot DevTools热部署开发增效工具

摘要&#xff1a;Spring项目又大又重&#xff0c;依赖多&#xff0c;编译启动慢&#xff0c;怎么提高研发效率呢&#xff1f;方法之一热部署&#xff01; 概念 Spring Boot DevTools 依赖名称: Spring Boot DevTools功能描述: Provides fast application restarts, LiveRelo…

softmax里边的exp用拟合验证精度。

文章目录 要验证Softmax函数中的指数运算&#xff08;exp函数&#xff09;对精度的影响&#xff0c;可以通过拟合一个函数来近似Softmax函数&#xff0c;并比较两者的输出结果。 import numpy as np import matplotlib.pyplot as plt# Softmax函数 def softmax(x):e_x np.exp…

25k的自动化测试面试题,原来都是这样~

小编热衷于收集整理资源&#xff0c;记录踩坑到爬坑的过程。希望能把自己所学&#xff0c;实际工作中使用的技术、学习方法、心得及踩过的一些坑&#xff0c;记录下来。也希望想做软件测试的你一样&#xff0c;通过我的分享可以少走一些弯路&#xff0c;可以形成一套自己的方法…

AI绘画时代的自媒体引流攻略:如何实现粉丝暴涨与盈利

一、AI绘画在自媒体引流和赚钱中的应用 创作独特视觉内容&#xff0c;吸引粉丝关注 AI绘画技术可以帮助自媒体从业者创作出独一无二的视觉内容&#xff0c;这些内容在社交媒体上具有很高的辨识度和吸引力。通过以下方式&#xff0c;AI绘画助力引流和赚钱&#xff1a; &#xf…

数学基础 -- 线性代数之伴随矩阵

伴随矩阵 1. 代数余子式 首先我们需要理解什么是代数余子式。对于一个 n n n \times n nn 的方阵 A A A&#xff0c;代数余子式 M i j M_{ij} Mij​ 是指从矩阵 A A A 中删除第 i i i 行和第 j j j 列后&#xff0c;剩下的子矩阵的行列式。 假设有一个 3 3 3 \time…

【软件】软件评审

目录 1. 说明2. 设计质量的评审内容3. 程序质量的评审内容3.1 软件结构3.2 功能的通用性3.3 模块的层次3.4 模块结构3.4 处理过程的结构 4. 与运行环境的接口5. 例题5.1 例题1 1. 说明 1.通常&#xff0c;把“质量”理解为“用户满意程度”。为了使得用户满意&#xff0c;有两…

SprinBoot+Vue图书馆预约与占座微信小程序的设计与实现

目录 1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue3.6 uniapp代码 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍&#xff1a;CSDN认证博客专家&#xff0c;CSDN平…

SpringBoot+Vue实现大文件上传(断点续传-后端控制(一))

SpringBootVue实现大文件上传&#xff08;断点续传&#xff09; 1 环境 SpringBoot 3.2.1&#xff0c;Vue 2&#xff0c;ElementUI&#xff0c;spark-md5 2 问题 在前一篇文章&#xff0c;我们写了通过在前端控制的断点续传&#xff0c;但是有两个问题&#xff0c;第一个问题&…

铁打的程序员轻易“不哭”-我的大模型创业近2年来的感悟

楔子 2022年11月&#xff0c;GPT-3发布那一刻&#xff0c;我被AI的强大能力所震撼&#xff0c;意识到“超级个体”时代的来临。自那时起&#xff0c;我开始全心投入创业&#xff0c;经历了许多苦乐交织的时光。 2023年6月&#xff0c;我尝试将AI应用于智能营销导购&#xff0…

云原生架构概念

云原生架构概念 云原生架构&#xff08;Cloud Native Architechtrue&#xff09;作为一种现代软件开发的革新力量&#xff0c;正在逐渐改变企业构建、部署和管理应用程序的方式。它的核心优势在于支持微服务架构&#xff0c;使得应用程序能够分解为独立、松耦合的服务&#xf…

window系统怎么设置闹钟提醒?分享一个桌面提醒设置办法

在日常工作和生活中&#xff0c;我们常常会因忙碌而遗忘一些重要事项。对于很多使用电脑办公的用户来说&#xff0c;如果能在桌面上设置闹钟提醒&#xff0c;无疑会大大提高工作效率&#xff0c;减少遗漏。那么&#xff0c;如何设置这样的闹钟提醒呢&#xff1f; 这时&#xf…

ElementUI实现el-table组件的合并行功能

前言 有时遇到一些需求&#xff0c;需要实现ElementUI中&#xff0c;el-tabled组件合并单元格的功能&#xff0c;稍微了解一下它的数据格式&#xff0c;不难可以写出比合并方法。但是在鼠标经过单元行时&#xff0c;会出现高亮的行与鼠标经过的行不一致的BUG。因此还需要实现c…

UniApp 中页面跳转的方法及传值

一、UniApp 中页面跳转的方法及特点 &#xff08;一&#xff09;常见的页面跳转方法 uni.navigateTo&#xff1a; 用途&#xff1a;用于跳转到应用内的某个页面&#xff0c;非 tabBar 页面&#xff0c;它会保留当前页面&#xff0c;打开新的页面并推入页面栈中。特点&#xf…