vue父子组件传值:父传子、子传父
最近项目中又需要用到父子组件,用了很多次之后对父子组件终于有种从善如流的感觉。会了之后再看自己写的父子组件传值的文章,感觉还是存在很多问题的,问题就不改了,在这篇文章做个总结和纠正吧。
父子组件就是在一个vue文件中引入另一个vue文件。被引入的vue文件是子组件,引入vue文件的vue文件是父组件。
1.父组件引入子组件
import引入,components调用。
import ZwFjdjForm from '../../../specialbond/modules/ZwFjdjForm'
components: {ZwFjdjForm},
在需要调用子组件的地方调用
<ZwFjdjForm ref="ZwFjdjForm" :currentId="currentId" :canModify="canModify" ></ZwFjdjForm>
这样子组件就被成功调用了。但是在很多情况下,我们需要父子组件互相传值
2.父组件给子组件传值
父组件 在引用子组件时,通过属性绑定(v-bind:)的形式,把需要传递给子组件的数据,传递到子组件内部,供子组件使用 。
:子组件接收父组件数据的元素="父组件传递的值"
这样,父组件中的数据,就成功传给子组件了。
3.子组件接收父组件传来的值
在之前的文章中,我说的是使用props接收,如下格式。
这个格式是可以使用的。但是后来我说过一个问题,遇到一个项目,需要调用子组件,而我需要在子组件里调用方法。之前想的是只传id,id传过去之后在子组件调用方法。当时是失败了,结论是子组件会在页面加载之前调用,所以后来是把方法写在父组件了。
这次遇到的也是一样的问题,但是这次成功了。
子组件是这样接收父组件的值的。
props:['canModify','currentId'],
这样是可以把id传给子组件,子组件再调用接口的,不太懂两者有什么区别。
4.子组件将值传给父组件
使用this.$emit('方法名',准备传给父组件的值)直接传
this.$emit('startDateChange',mode)//向父级组件传递参数
5.父组件接收子组件传来的值
调用方法接收
<a-tab-pane tab="基本情况" :key="refKeys[0]" :forceRender="true"><zw-mhk-zxzq-jbqk-form ref="zwMhkZxzqJbqkForm" :canModify="canModify" @startDateChange="startDateChange" ></zw-mhk-zxzq-jbqk-form>
</a-tab-pane>
startDateChange(data){this.changedStartDate = data
}
这样父组件就取到了子组件传来的值
6.父组件直接调用子组件的方法
startDateChange(data){this.$refs.zwMhkZxzqSzysForm.getDate(data)
},
直接$refs.子组件.子组件的方法
关于父子组件的内容,在这里也算做了个完善了,希望以后父子组件不要再出现问题了。
之前写的父子组件传值文章:
vue父子组件传值_芝士焗红薯的博客-CSDN博客_父子组件传值
vue父子组件传值:父传子、子传父相关推荐
- vue父子组件传值之异步之后子组件无法拿到父组件传的值
在vue中父子组件传值是非常常见的,父组件给子组件传值使用的是props,子组件给父组件传值使用的是$emit 但是今天就不详细的介绍父子组件之间传值,在这里我们介绍的是子组件在异步请求回来的参数无法 ...
- Vue父子组件传值----$emit子传父
Vue父子组件传值是个比较经典的问题,在这里,咱们先谈一下,子组件给父组件传值. 这是一个子组件 <!-- 子组件1 --> <template><div class=& ...
- vue父子组件传值:详解父组件向子组件传值(props)
vue父子组件传值:父组件向子组件传值用的是props 1.定义父组件 1)父组件想要向子组件传值时,那么需要在子组件引入的地方绑定一个属性,属性值就是要传的数据,并且要在父组件中引入子组件. 2)这 ...
- vue父子组件传值之 $emit和props
vue父子组件传值之 $emit和props 前言 子组件向父组件传值 父组件向子组件传值 前言 在进行vue的项目中,我们难免会需要父子组件之间进行传值,父子组件传值可以通过 $emit和props ...
- vue父子组件传值的一些坑(深浅拷贝)
本文章转载:https://www.yht7.com/news/116487 1.问题描述 父组件传值给子组件,子组件改变传过来的值后,父组件的值也会跟着改变. 这个问题比较冷门,平时如果对组件通信使 ...
- vue 父子组件传值
父子组件传值 最常用的方法(4种) 1 . 父组件 传递数据 给子组件(props)vue官方文档 特别注意!!特别注意!!特别注意!! props传值的类型如果是Object类型,如对象,数组等,传 ...
- 快速理解Vue父子组件传值
组件化开发是目前前端开发必备的开发技能,组件化开发可以大大提高开发效率 今天整理一下Vue的父子组件传值方式,方便还没有理解的朋友学习. 1.父组件向子组件传值 <!-- 父组件 --> ...
- VUE父子组件传值(含实例)
vue父子组件通信 这里的movies数组和message字符串,相当于是在父组件中对要传给子组件的数据做赋值或者计算等操作. 1.父传给子(在子组件中改数据) 父组件: 1.在子组件上绑定数据arr ...
- Vue父子组件传值问题
今天在编写vue子组件时遇到的两个问题来分享以下 父子组件传值问题 父组件 <md-editor ref="mdEditor" :text="form.conten ...
- Vue父子组件传值.sync
传统的父子组件之间传值,父组件通过 :变量="xxx"将值传给子组件,子组件通过props进行接收.但是子组件只有读的属性,不可以对数据进行更改,所以$emit传回父组件,由父组件 ...
最新文章
- 点击鼠标左键 自动锁定计算机图标,鼠标一按左键桌面图标就消失了怎么办_为什么按鼠标左键时桌面图标都不见了...
- DuckChat聊天系统PHP,部署自己的聊天系统 DuckChat(鸭信)仿微信 PHP源码
- mysql序列号发生器
- MySQL调优(四):MySQL索引优化实现细节
- sql 显示百分比_轻松搞定数据分析之SQL——简单查询
- php 包 排行,PHP 的 Phar 包原来性能这么强!
- jsp引入页面,即包含文件的两种方法介绍
- MySQL客户端连接被频繁杀掉,企业案例(一):由于mysql sleep线程过多小故障
- 【JVM】第1篇:JVM内存模型
- javascript中数组循环的方式
- GAEA Winsieve v1.2 1CD(快速输入和打印结晶粒度分析曲线)
- 合并两个有序数组的三种方法
- c语言写死循环程序,通过简单的例子看c程序死循环
- 赖美云的认证照_818吴宣仪赖美云杨超越等《创造101》人气女孩旧照,鉴定是否整容~...
- 再携手,齐并进!菊风助力宁波银行坐席PUSH外呼项目
- numpy 处理txt的简单样例
- 我的世界服务器修改生成怪物速度的文件,我的世界服务器怎么不生成怪物_禁止服务器产生怪物代码大全_游戏城...
- 悟空CRM SAAS平台接口API文档
- 党政机关计算机工作室装修标准规定,机房建设标准及规范-20210711211357.docx-原创力文档...
- Android问题集锦之十五 可笑的unauthorized错误