vue组件通信 - 父向子传、子向父传 (详细步骤)
目录
一、父组件向子组件传值
1、要传递的值为 普通数据类型 的值,
2、要传递的值为 复杂数据类型、被变量接收的值类型
二、子组件向父组件传值
三、扩展
(注意:谁被引入,谁即为子组件)
一、父组件向子组件传值
以要传递的数据类型可分为两种情况
1、要传递的值为 普通数据类型 的值,
父组件内传值~(直接在组件标签内使用,以键值对形式书写)
<组件名 title="小朋友" uname="小明"> </组件名>
子组件内接收值~ (注意要与父组件内定义的变量名一致)
export default {props: ["title" , "uname"]
}
2、要传递的值为 复杂数据类型、被变量接收的值类型
父组件传值 ~ (在标签内以动态属性绑定的形式传入变量)
<template><div><组件名 :title="myTitle" :list="arr"> </组件名> <!--myTitle、myName变量都已有值--></div>
</template>
子组件内接收值~ (此为props的常用形式)(注意要与父组件内定义的变量名一致)
export default{props:{title:{type:String //此为title的数据类型},list:{type: Array //此为list的数据类型}}
}
二、子组件向父组件传值
实现语法:
父组件中: @自定义事件名 = " 父内methods 函数名 "
子组件中: this.$emit(“父内的自定义事件名” , 要传的值 )
子组件内传值~
export default{methods:{btn(){ //点击按钮发送子内的数据this.$emit("自定义事件名" , 要传递的数据)}}
}
父组件内接收值
//须在组件名标签上 创建桥梁
<template><div><组件名 @子内的自定义事件名 = " 父内的函数名"> </组件名></div>
</template>
export default{methods:{组件名标签内定义的函数名 (val) { //此val形参即是从子组件接收到的传递值this.uname = val //改变自身值}
}
三、扩展
1、<comA> </comA> 若标签内无数据即可简写为 <comA />
2、<comA> </comA> 写法等于 <com-a> </com-a>
2、$parent 可以在子组件内 获取到父组件内所有的实例对象且可访问方法、对象
3、$refs 可以在父组件中获取到 子组件内所有的实例对象且可访问方法、对象
在组件中设置 ref="myRef"
例:<comA @updateInfo=" message = $event " ref="myRef"> </comA>
this.$refs.myRef 就可以得到子组件中的实例对象
vue组件通信 - 父向子传、子向父传 (详细步骤)相关推荐
- Vue组件通信:父传子、子传父、跨组件通信
方法一:组件通信_父传子_props(属性绑定) 在进行组件通信之前,我们首先要明确父和子是谁,父传子=>在父中引入子(被引入的是子) 1. 父传子,要先在子组件内定义props变量,准备接收, ...
- vue组件通信(传值)
vue组件通信有以下几种方式可以实现(个人总结) 一.父组件到子组件传值方式: 一般通过在父组件中给子组件绑定属性的方式进行传值,子组件通过props来接收. 实例: //父组件 <templa ...
- 【Vue】Vue全家桶(三)Vue组件通信+Vue组件插槽+动画与过渡+使用vue-cli解决Ajax跨域问题
1 Vue组件通信 1.1 组件间通信基本原则 不要在子组件中直接修改父组件的状态数据 数据在哪, 更新数据的行为(函数)就应该定义在哪 1.2 vue 组件间通信方式 props vue 的自定义事 ...
- vue组件通信案例练习(包含:父子组件通信及平行组件通信)
文章目录 一.案例概述 二.代码 准备工作: 案例1.1:父组件向子组件传值(或者叫:子组件使用父组件属性),采用v-bind方式实现 案例1.2:子组件向父组件传值(或者叫:子组件调用父组件方法), ...
- Vue组件通信的五种方式
Vue组件通信的五种方式 文章目录 Vue组件通信的五种方式 一. props/$emit(父子通信) 二. vuex(组件之间通信) 三. 事件总线EventBus(组件之间通信) 四. provi ...
- vue组件通信的几种方法
vue中我们最常使用的就是父子之间的通信还有全局数据管理vuex了,下面粗略说一下vue组件通信的几种方法 组件通信的几种方式 1.父子组件通信 2.兄弟组件通信 3.跨多层级组件通信 4.任意组件( ...
- vue组件通信的几种方式
vue组件通信的几种方式 最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Chil ...
- vue 组件通信的几种方式
前言 在vue中, 组件的关系不外乎以下三种: 组件是需要通信的,在开发中,常用到的通信方式有:vuex.eventBus.以及props与emit.$parent与$children,除此之外,还 ...
- 计算机考试上传照片教程,电脑照片传到iPhone手机的详细步骤【图文】
苹果自带的iOS系统是不可以随便和电脑进行数据交换的,必须使用iTunes软件.许多用户为此问题困扰,我们有什么可以把电脑照片传到iPhone手机?下面我们就一起来看看把电脑照片传到iphone设备的 ...
- html照片苹果手机,电脑照片传到iPhone手机的详细步骤【图文】
苹果自带的iOS系统是不可以随便和电脑进行数据交换的,必须使用iTunes软件.许多用户为此问题困扰,我们有什么可以把电脑照片传到iPhone手机?下面我们就一起来看看把电脑照片传到iphone设备的 ...
最新文章
- Linux无盘教程,如何无盘启动Linux
- python【蓝桥杯vip练习题库】ADV-350珠心算测验
- 三星note4 9100自动关机问题以及空间不够的问题研究。。。。
- 矩阵快速幂 zoj-3690 Choosing number
- java schema名_关于Schema的名字空间
- linux 网络在线升级,linux在线升级
- SQL语句使用大全,最常用的sql语句
- react native (一)
- 文件I/O实践(2) --文件stat
- window.open ()的用法
- mysql数据库教程子查询_MySQL数据库实操教程(17)——子查询
- 网吧母盘网上精华+个人总结=超详细
- 测试转开发,我都经历了什么
- 网易邮箱接收ibm的邮件_在IBM Integration Bus中发送和接收带有大型附件的SOAP消息
- iOS常见错误1-SQLite错误-SQLITE_CANTOPEN,SQLITE_MISUSE和SQLITE_BUSY
- 22考研初试410数一145上岸上海交通大学819经验分享
- 从后端到前端,JavaScript和Java有关系吗
- bzoj 3036: 绿豆蛙的归宿
- peel在Linux生成excel,zplane -
- CodeWarrior 使用教程第六课:定制
热门文章
- 网络笔记_OSPF不同网络类型通讯、虚连接的应用
- 2.序贯最小二乘估计(仅包含滤波)
- 三变量二次函数的存在、恒成立_Simplelife_新浪博客
- 2.4G与433MHZ PCB 天线设计指南
- 22.从零开始开发QT软件思路(单片机的串口通信)-- OpenCV从零开始到图像(人脸 + 物体)识别系列
- 清华计算机推免录取2020,清华大学2020年推免研究生本科都来自哪些院校 推免生一定会被录取吗...
- Ant Design Pro V5精讲(实践篇一):自定义登录界面、主界面
- 北京联合大学计算机学院在哪个校区,北京联合大学有几个校区及校区地址
- 华为服务器忘记管理密码怎么修改,如何修改云服务器登陆密码忘记了
- Verilog入门——Quartus2基础使用