vue父子组件之间的传值,及互相调用父子组件之间的方法

news2024/10/7 8:30:01

场景:记录下父子组件之间的传值方法,以及调用他们的内部的方法

        *** 父组件给子组件传值是通过属性绑定的方法

        *** 子组件给父组件传值是通过绑定对应的方法将自身的值传递给父组件

        当然,我这只是说了一种传参方式,也包含通过vuex的方式,或者先将值存放在本地,再去通过请求本地数据进行传值等等方法

第一:父组件向子组件传值

第一步:首先创建一个父组件:father.vue

第二步:导入子组件:

        

import son from './son.vue'

第三步:在父组件中注册子组件:

components:{
    son,//如果组件名字跟注册名字一样,可简写
}

           这里注意的是:如果你导入的子组件名称跟你要在父组件中放置的子组件名称一样,             那你可以像上述简写

第三步:将注册的子组件放置到父组件的页面中

<son :father='countryName' @fatherFunction='getSon'></son>

        注意::father='countryName'就是父组件在子组件身上绑定了一个father对象,                                countryName作为father的值,传递给子组件

                    

                    @fatherFunction='getSon'是子组件绑定的一个向父组件传值的方法

                                                                  在子组件向父组件传值的时候介绍

到了这一步:就已经完成了父组件向子组件传值的过程

第四步:子组件接收父组件传递过来的数据

        在子组件中定义 props

        

props:['father'],

        里面的father就是父组件传递给子组件的属性值

        你就把props写在export default 与data之间即可,反正跟data是平级

除了通过props接收父组件传递的值外,还可以通过this.$parent.countryName获取父组件的值

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

 第五步:子组件中使用父组件中传递过来的值:

this.father

直接this.传过来的参数名 即可成功调用父组件传递的值

第二:子组件向父组件传值 (可以传多个值,传几个,父级页面接收几个)

第一步:定义子组件要给父组件传递的数据

第二步:在子组件中定义一个父级页面接收的名称

        比如我是在点击了这个事件后,触发给父组件传值

changeData(){     
    this.$emit('fatherFunction',this.sonArr,this.num)
}

        fatherFunction:这个就是父级用来接收的方法名

        这里我是给传递了两个数据,所以在父级页面接收的时候,也得接收两个数据

到了这一步就已经完成了子组件向父组件传值的步骤

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

在父组件接收子组件传递过来的值

<son :father='countryName' @fatherFunction='getSon'></son>

fatherFunction:就是子组件向父组件传值时定义的一个接收方法名

然后在这个方法中定义一个接收子组件传递过来值的方法,我这里定义的是getSon

开始接收值:因为我传来两个值,所以也得接收两个

getSon(arr,num){
    this.sonArrs=arr
    this.numBer=num
},

到这就完成了父子组件之间的传值!!!

第三:父组件触发子组件的方法:

        第一种:

<son ref="son" />

 this.$refs.son.方法名()     

第二种:  

this.$refs.son.$emit('Fn')//子组件中$on中的名字

        子组件:

        

this.$nextTik(function(){
    this.$on('Fn',function(){
        console.log('打印信息')
    })
})

第四:子组件触发父组件的方法:

        通过:$parent 以及 $emit

以上只是写了其中一部分方法,下班!!!

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

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

相关文章

Spring Boot基于FreeMarker发送模板邮件(带附件)

目录一、背景二、maven依赖三、编码实现3.1、邮件对象3.2、服务层3.2.1、抄送人3.2.2、嵌入式资源3.2.3、附件3.3、邮件模板3.3.1、模板引擎3.4、配置文件四、测试4.1、发送简单邮件4.2、发送复杂邮件4.3、效果图一、背景 邮件在工作中中经常被用到&#xff0c;场景非常的广泛&…

高分子PEG:8Arm PEG-DBCO,八臂聚乙二醇环辛炔 MV1K 2K 3.4K 5K

【中文名称】八臂聚乙二醇环辛炔 【英文名称】 8Arm PEG-DBCO&#xff0c;DBCO PEG 8Arm 【结 构 式】 【CAS号】N/A 【分子量】1000&#xff0c;2000&#xff0c;3400&#xff0c;5000&#xff0c;10000&#xff0c;20000 【基团部分】DBCO 【纯度标准】95% 【包装规格】1g&…

【Lilishop商城】No3-8.模块详细设计,订单模块-2(订单)的详细设计

仅涉及后端&#xff0c;全部目录看顶部专栏&#xff0c;代码、文档、接口路径在&#xff1a; 【Lilishop商城】记录一下B2B2C商城系统学习笔记~_清晨敲代码的博客-CSDN博客 全篇会结合业务介绍重点设计逻辑&#xff0c;其中重点包括接口类、业务类&#xff0c;具体的结合源代…

ssm+Vue计算机毕业设计校园社团管理系统(程序+LW文档)

ssmVue计算机毕业设计校园社团管理系统&#xff08;程序LW文档&#xff09; 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技…

Android入门第46天-使用BroadCast来模拟异地登录事件发生后的主动退出另一个设备重登录

简介 随着对BroadCast的越来越深入&#xff0c;我们今天要实现一个稍微复杂一点的BroadCast。即我们常用来有时APP打开时如果多个设备同时登录一个帐号&#xff0c;而我们只允许一个设备登录一个帐号时&#xff0c;此时我们的APP会弹一个对话框如&#xff1a;您的账号在别处登…

结合面试详细分析 HashMap 源码

个人文档站点&#xff1a;小熊学Java 1、底层结构 相信大家都已经听过很多了&#xff0c;这里就不多阐述了&#xff0c;至于什么时候是数组&#xff0c;什么时候会变成链表&#xff0c;后续会讲解&#xff0c;别急&#xff01; JDK版本数据结构JDK1.7数组链表JDK1.8数组 &…

腾讯云数据万象:智能+存储双驱动,数倍提升内容生产效能

伴随数字经济市场稳步扩张&#xff0c; AI和富媒体融合的场景式体验、营销模式、分享渠道已经成为数字商业中不可或缺的部分。12月1日&#xff0c;在2022腾讯全球数字生态大会存储专场&#xff0c;腾讯云数据万象发布产品更新&#xff0c;与腾讯云对象存储COS共同打造智能存储生…

[附源码]Nodejs计算机毕业设计基于JAVA语言的国货美妆店管理系统Express(程序+LW)

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流 项目运行 环境配置&#xff1a; Node.js Vscode Mysql5.7 HBuilderXNavicat11VueExpress。 项目技术&#xff1a; Express框架 Node.js Vue 等等组成&#xff0c;B/S模式 Vscode管理前后端分…

JavaScript-DOM操作表单

目录 表单事件 表单方法 操作表单 获取表单的值 表单内容html checkbox的获取办法 表单事件 注意&#xff1a;onsubmit,onreset只能给表单添加 表单.submit ;表单.onreset; form.onsubmitfunction(){alert(表单即将被提交);};form.onresetfunction(){alert(表单即将被重…

ChatGPT:竟然精通ENVI IDL、ArcGIS等软件!

目录 01 使用途径 02 使用 01 使用途径 我试了很多网站&#xff0c;包括注册登录、插件、镜像网站&#xff0c;微信机器人&#xff0c;QQ机器人&#xff0c;但是目前这些或多或少都由于OpenAI的限制无法正常使用。所以总的来说需要科学上网并且需要国外手机号&#xff0c;这有…

CCIE-重认证-300-410-补充题库-必须的哟

实验题 VRF router bgp 65000 bgp router-id x bgp log-neighbor-cha address-fa ipv4 vrf green red con neigh x remote-as 65000 neigh x act 重复red inter e0/0 ip vrf for red ip add x x 重复e0/1,for green inter e0/2.100 enc dot 100 ip vrf for red ip add x x …

无工具情况下linux数据库命(postgresql)令行建表操作文档

首先将帮助文档下的test.sql放在服务器的某个位置。sql文件如下图&#xff1a; /*Navicat Premium Data TransferSource Server : postgres-123Source Server Type : PostgreSQLSource Server Version : 100010Source Host : 192.168.3.123:5432Source C…

完全开源的代码生成器之code-generator

什么是code-generator code-generator是一个低代码平台, 可以解决90%单表增删改查工作量, 你可以通过自定义代码模板来生成适合自己的代码。 目前该系统主要针对的是语言是java, 数据源是mysql(其他数据库待测试)&#xff0c;数据源支持mysql, oracle, dm, PostgreSql等数据库…

[附源码]计算机毕业设计的在线作业批改系统Springboot程序

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; Springboot mybatis MavenVue等等组成&#xff0c;B/S模式…

Revit 中注释族的应用详解及公共族库工具

一、Revit 中注释族的应用详解&#xff1a; 注释族是用来表示二维注释的族文件&#xff0c;它被广泛用于很多构件的二维视图表现。下面以一个实例来说明注释族的应用 1、注释族创建实例 用“公制常规注释.rft”族样板创建一个注释族&#xff0c;在“族类别和族参数”对话框中选…

视觉SLAM ch9

状态估计的概率解释&#xff1a;位姿x和路标y服从某种概率分布&#xff0c;目的是通过某些运动数据u&#xff08;比如惯性测量传感器IMU输入&#xff09;和观测数据z&#xff08;比如拍摄到的照片像素点的值&#xff09;来确定状态量x和y的分布。 一、关于卡尔曼滤波器和扩展卡…

ssm+Vue计算机毕业设计校园食堂订餐系统(程序+LW文档)

ssmVue计算机毕业设计校园食堂订餐系统&#xff08;程序LW文档&#xff09; 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技…

Vim解决问题的方式

目录1 认识 . 命令2 不要自我重复3 以退为进4 执行、重复、回退5 查找并手动替换1 认识 . 命令 . 命令让我们重复上次的修改&#xff0c;它是Vim中最为强大的多面手。我们来练习下&#xff0c;如何快速的在vim进行操作&#xff0c;由下图形&#xff1a; 转成如下图形&#x…

win10下CH340模块下载stc89c52程序

没想到读研究生了还有水课需要用上51单片机&#xff0c;本科的时候一直是用开发板烧录程序的&#xff0c;这次舍不得花钱买开发板只能瞎折腾了。 准备材料 1.ch340转接板&#xff0c;最普通的那种3~5块钱 2.买的是一个焊接好的小单片机系统 &#xff08;BB一句&#xff0c;这…

内皮细胞生长添加剂(ECGF/ECGS)丨艾美捷解决方案

内皮细胞生长添加剂&#xff08;ECGF/ECGS&#xff09;是一种内皮细胞体外培养不可缺少的补充物质&#xff0c;可以优化细胞的体外生长环境&#xff0c;促进内皮细胞的正常增殖和生长。ECGF/ECGS是一种无菌浓缩&#xff08;100X&#xff09;溶液&#xff0c;含有正常人内皮细胞…