vue组件,父传子、子传父、父调子、子调父简单理解总结

总结目录

方法总结
子组件获取父组件变量(也可用父组件调用子组件中的方法传值)
父组件获取子组件变量(介绍两种方法)
父组件调用子组件中的方法
子组件调用父组件中方法(介绍两种方法)

方法总结

vue父子组件数据/方法传递调用
变量传递：父组件变量传送到子组件、子组件变量传送到父组件
方法调用：父组件调用子组件中方法、子组件调用父组件中方法

子组件获取父组件变量(也可用父组件调用子组件中的方法传值)

方法关键字：props
步骤(2步)：

在父组件引用子组件标签中定义接受变量名并传值。
公式：:子组件接受变量名=“父组件要传的变量名”
如：nowPriceF="nowPrice"

在子组件data()方法平级定义props对象接收变量。
公式：props: { }
如：props: {nowPriceF: Number}

完整例子：

// 父组件
<Add v-if="orgDialogVisible" ref="addChild" :nowPriceF='Number(nowPrice)'></Add>

// 子组件
export default {props: {nowPriceF: Number},data() {}
}

父组件获取子组件变量(介绍两种方法)

1. 方法一

方法关键字：ref 、$refs
步骤(2步)：

在父组件引用子组件标签中定义ref，利用ref获取子组件变量。
公式：ref=“对子组件定义唯一ref值”
如：ref="addChild"

在父组件中直接获取子组件中的变量。
公式：this.$refs.addChild.子组件中变量名

如：this.$refs.addChild.addForm
完整例子：

//父组件
<Add v-if="orgDialogVisible" ref="addChild" :nowPriceF='Number(nowPrice)'></Add>
//在所用的方法获取，addForm:子组件中变量名
this.$refs.addChild.addForm

2. 方法二（也是子组件调用父组件的方法）

方法关键字：$emit
步骤(2步)：

在子组件中通过 e m i t 调用父组件中定义的方法，将变量以参数带过去。公式： ∗ ∗ ‘ ‘ ‘ ‘ t h i s . emit调用父组件中定义的方法，将变量以参数带过去。公式：**````this. emit调用父组件中定义的方法，将变量以参数带过去。公式：∗∗‘‘‘‘this.emit(‘传递到父组件的方法名’,需要传递的变量)”````**
如：this.$emit(‘lookPhotos’,file.url)

在父组件引用子组件标签中获取子组件定义的方法并获得参数。
公式：@子组件定义传递到父组件的方法名="父组件获取参数变量的方法($event)"

如：@lookPhotos="lookPhotosUrl($event)"
完整例子：

//子组件
handlePictureCardPreview(file) {this.$emit('lookPhotos',file.url)//lookPhotos 定义传递到父元素的方法名//file.url 父元素要获取的东西
},

//父组件
<Add v-if="orgDialogVisible" ref="addChild" @lookPhotos="lookPhotosUrl($event)" :nowPriceF='Number(nowPrice)'></Add>//在methods: {}中获取
lookPhotosUrl(url){console.log('父元素需要的东西'，url)
},

父组件调用子组件中的方法

方法关键字：ref、$refs
步骤(3步)：

在父组件引用子组件标签中定义ref，利用ref获取子组件变量。
公式：ref=“对子组件定义唯一ref值”
如：ref="addChild"

在父组件中直接调用子组件中的方法，可传参数。子组件获取父组件变量也可以用这个方法。
公式：this. r e f s . a d d C h i l d . 子组件中方法名 ∗ ∗ 如： ∗ ∗ t h a t . refs.addChild.子组件中方法名** 如：**that. refs.addChild.子组件中方法名∗∗如：∗∗that.refs.addChild.calculateWithdrawal(row)

在子组件中执行调用的方法，可获取参数。
公式：定义普通方法一样
如：calculateWithdrawal(row){ }

完整例子：

//父组件，标签中定义ref就不贴代码了 都懂得
this.$refs.addChild.calculateWithdrawal(row)
//calculateWithdrawal 子组件中定义好的方法

calculateWithdrawal(row){console.log('父组件中调用了这个方法并传递了参数'，row)
}

子组件调用父组件中方法(介绍两种方法)

1. 方法一【常用】（也就是父组件获取子组件变量的方法2）

方法关键字：$emit
步骤(2步)：

在子组件中通过$emit调用父组件中定义的方法，参数可有可没有。
公式：this.$emit('传递到父组件的方法名',需要传递的变量)”
如：this.$emit(‘lookPhotos’,file.url)

在父组件引用子组件标签中获取子组件定义的方法并获得参数。
公式：@子组件定义传递到父组件的方法名="父组件获取参数变量的方法($event)"

如：@lookPhotos="lookPhotosUrl($event)"
完整例子：

//子组件
handlePictureCardPreview(file) {this.$emit('lookPhotos',file.url)//lookPhotos 定义传递到父元素的方法名
},

//父组件
<Add v-if="orgDialogVisible" ref="addChild" @lookPhotos="lookPhotosUrl($event)" :nowPriceF='Number(nowPrice)'></Add>

lookPhotosUrl(url){console.log('我是被子组件召唤的方法'，url)
},

2. 方法二

方法关键字：$parent
步骤(1步)：

在子组件中通过 $parent调用父组件中的方法。
公式：this.$parent.父组件方法名
如：this.$parent.oFF_orgDialog()

注意：可能会报错误 TypeError: this.$parent.xxx is not a function
解决方法：这里，不过尽量使用方法一

完整例子：

//子组件
this.$parent.oFF_orgDialog()
//oFF_orgDialog( )  父组件中方法

vue组件,父传子、子传父、父调子、子调父简单理解总结相关推荐

自定义vue组件--实现多图片上传
一引入文件上传在日常的开发中是一项基本的操作,在前端中得以广泛的使用,因此将其封装成一个组件显得极为重要,本文主要是基于vue实现的自定义多图片上传组件. 二自定义vue上传组件 MultiUp ...
封装Vue组件的原则及技巧
封装Vue组件的原则及技巧 Vue的组件系统 Vue组件的API主要包含三部分:prop.event.slot props表示组件接收的参数,最好用对象的写法,这样可以针对每个属性设置类型.默认值或自 ...
Vue组件之间传值的几种方法 (直接上代码)
vue组件之间传值的几种方法总结一. props(父传子) 父组件传递 <template><div><HelloWorld :msg="msg" ...
Vue组件绑定自定义事件
Vue组件使用v-on绑定自定义事件: 可以分为3步理解: 1.在组件模板中按照正常事件机制绑定事件: template: '<button v-on:click="increment ...
面试-vue组件间通信
说一说vue组件间的通信? 1.props,$emit,sync props父组件绑定传值,子组件声明props接收 props接收值原则上不允许改变,但对于对象属性改变,可能不会被vue检测到 $e ...
【Vue 组件化开发三】父组件给子组件传递数据、组件通信（父传子、子传父）、父访问子（children、ref）、动态组件（is、component）
目录一.前言完整内容请关注: 二.父组件给子组件传递数据 1.使用props属性,父组件向子组件传递数据 1.使用组件的props属性 2.向cmessage对象传值 2. props属性使用 1 ...
vue组件通讯：父传子、子传父、事件发射详解
1.组件通讯每个组件有自己的数据, 提供在data中:每个组件数据独立, 组件数据无法互相直接访问 (合理的) 但是如果需要跨组件访问数据, 怎么办呢? => 组件通信组件通信的方式有 ...
Vue组件之间的通信-父传子-子传父
文章目录 Vue的组件嵌套 Vue组件间通信 1.父组件传递给子组件 1.1数组的方式 1.2对象的方式 2.子组件传递给父组件 Vue的组件嵌套前面我们是将所有的逻辑放到一个App.vue中: 在 ...
Vue组件通信(父传子、子传父、兄弟通信)
一.父组件传到子组件父组件是通过props属性给子组件通信的数据是单向流动父->子 (子组件中修改props数据,是无效的,会有一个红色警告) 1 . 父组件parent.vue代码如下: ...

vue组件,父传子、子传父、父调子、子调父简单理解总结

总结目录

方法总结

子组件获取父组件变量(也可用父组件调用子组件中的方法传值)

父组件获取子组件变量(介绍两种方法)

父组件调用子组件中的方法

子组件调用父组件中方法(介绍两种方法)

vue组件,父传子、子传父、父调子、子调父简单理解总结相关推荐

最新文章

热门文章