vue父组件与子组件方法的互相调用

原创 已于 2022-03-06 17:55:48 修改 · 282 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #js

于 2020-08-04 11:52:09 首次发布
本文详细介绍了在Vue.js中父组件如何通过ref调用子组件的方法，子组件如何通过$parent访问父组件方法，以及如何使用props和emit进行组件间通信。

父组件调用子组件的时候实例

<changeYourInformation ref="changeInformation" ></changeYourInformation>
ref就可以绑定子组件中的方法，在JS调用的时候，写上

this.$refs.changeInformation.changeInformation()

最后的那个就是子组件的方法

同理 子组件调用父组件方法为

this.$parent.父组件方法名

也可以使用props将父组件的方法传递过来 然后在子组件使用

也可以在子组件emit到父组件一个指令，然后这个指令在父组件去操作他的方法

vue 父组件中调用子组件函数的方法
12-11
在父组件中调用子组件的方法：  1.给子组件定义一个ref属性。eg:ref="childItem"  2.在子组件的methods中声明一个函数。eg: useInPar:function (str) {console.log(str)}  2. 在父组件的中声明一个函数，并通过this.$refs.childItem.userInPar来使用子组件中声明的函数。  父组件： <template> <child ref='child'> <button @click='useChildFun'></button> </template> [removed] ```
Vue父组件调用子组件事件方法
11-28
Vue父组件向子组件传递事件/调用事件 不是传递数据（props）哦，适用于 Vue 2.0 方法一：子组件监听父组件发送的方法 方法二：父组件调用子组件方法 子组件： export default { mounted: function () { this.$nextTick(function () { this.$on('childMethod', function () { console.log('监听成功') }) }) }， methods { callMethod () { console.log('调用成功'
vue 父组件中调用子组件的方法
qq_29236119的博客
02-02 3872
Vue项目中如何在父组件中直接调用子组件的方法： 方案一：通过ref直接调用子组件的方法； //父组件中 <template> <div> <Button @click="handleClick">点击调用子组件方法</Button> <Child ref="child"/> </div> </template> <script> import Chil
Vue父组件调用子组件的方法（ref）
qq_42786138的博客
05-12 7223
vue中如果父组件想调用子组件的方法，可以在子组件中加上ref， 然后通过this.$refs.ref.method调用，例如： 父组件： <template> <div @click="fatherMethod"> <child ref="child"></child> </div> </template> <script> import child from '~/components/dam/...
vue中父组件调用子组件函数
weixin_34149796的博客
04-09 331
用法： 子组件上定义ref="refName", 父组件的方法中用 this.$refs.refName.method去调用子组件方法 详解： 父组件里面调用子组件的函数，父组件先把函数/方法以属性形式传给子组件；那么就需要先找到子组件对象 ，即 this.$refs.refName. 然后再进行调用，也就是this.$refs.refName.method 如下： 子组件： ...
Vue 父组件调用子组件的方法
weixin_30852451的博客
04-13 200
qwq 前两天看了下vue，父子组件方法的调用，怕忘记，所以做个小记录。 一.父组件调用子组件的方法 1.父组件 <template> <div id="rightmenu8"> <rightmenu7 ref="rightmenu7"></rightmenu7> // ref要放在组件上 <button @cl...
vue父组件调用子组件中的方法
MR_bailu的博客
05-13 2209
在Vue中，父组件调用子组件方法主要有两种方式：一是通过$refs直接调用，二是通过事件通信（$emit + $on）。使用$refs时，父组件在模板中为子组件标记ref属性，并通过this.$refs.refName获取子组件实例，直接调用其方法。这种方式代码简洁，但需避免过度耦合。事件通信方式则通过子组件$emit触发事件，父组件监听并处理该事件，适合需要解耦的场景，更符合单向数据流原则。两种方式各有适用场景，开发者可根据需求选择。
vue 调用子组件方法失败_vue 父组件调用子组件方法
weixin_36372014的博客
01-12 507
最近项目中用到的父子组件间的调用挺频繁的，整理下，方便以后查找。$emit、$on 方式参考子组件调用父组件方法的第二种方法。通过ref直接调用子组件方法//父组件ref="consumptionTable":billDate="billDate">this.$refs.consumptionTable.getData();//子组件props: {billDate: {type: Stri...
vue中父组件调用子组件的方法
是大林的林吖-博客
09-10 165
通过ref直接调用子组件的方法,this.$refs.child.fun() 父组件.js // 父组件中 <template> <div> <Button @click="handleClick">点击调用子组件方法</Button> <Child ref="child"/> </div> </template> <script> import Chil
VUE中父组件调用子组件的方法
Ann1223的博客
12-03 858
VUE中父组件调用子组件的方法 父组件通过 props 向下传递数据给子组件，子组件通过 $emit触发events 给父组件发送消息。尽管存在 props 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件，这就需要使用ref特性，通过 ref 特性为这个子组件赋予一个 ID 引用。 ref：用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用，那么指向的就是普通的DOM元素。 ref加在子组件上，在父组件中用this.$refs
vue父组件中调用子组件的方法
Dreamlandz的博客
07-26 2158
（1）通过ref直接调用子组件的方法 //父组件中 <template> <div> <Button @click="handleClick">点击调用子组件方法</Button> <Child ref="child"/> </div> </template> <script> import Child from './child'; export
Vue项目中在父组件中直接调用子组件的方法
peppa_pig的博客
11-26 1119
通过ref直接调用子组件的方法 父组件： <template> <div> <Button @click="handleClick">点击调用子组件方法</Button> <Child ref="child"/> </div> </template> <script> import Child from './child'; export def
vue父组件调用子组件中的方法、值的几种方式
高宇辰
08-12 8422
直接在父组件内部给子组件标签添加ref属性，然后通过ref属性来调用子组件的方法。
VUE 父组件调用子组件方法
q3272323715的博客
03-04 485
父组件调用子组件方法，自定义组件发布npm
vue 父组件调用子组件方法
weixin_34236869的博客
03-29 1729
情景: 　　父组件中引入上传附件的子组件:点击组件可以分别上传对应要求的图片,子组件内部循环可创建多个模块. 　　父组件传入数组子组件循环来创建不同的组件模块,所有事件都在子组件内部. 　　 　　父组件页面的上方同时有一个上传图片按钮上传图片后会显示在第一个模块: 　　 　　设想思路:点击父组件中的按钮触发子组件中上传方法: 　　子组件上定义ref="refName",父...
Vue中父组件调用子组件的方法
BADAO_LIUMANG_QIZHI的博客
11-26 8167
场景 SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图： SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图_BADAO_LIUMANG_QIZHI的博客-优快云博客 在上面的博客页面是父组件，时间选择器是父组件的标签，柱状图是引用的子组件。 实现在父组件选择时间后调用子组件的方法重新渲染柱状图。 注： 博客：BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_优快云博客-C#,SpringBoot,架构之路领域博
vue项目中父组件调用子组件的方法
m0_64411343的博客
08-24 197
vue项目中父组件调用子组件的方法
vue父组件调用子组件方法，子组件调用父组件方法
最新发布
07-11
以下是基于 Vue 2 和 Vue 3 的实现方式，涵盖了父组件调用子组件方法以及子组件调用父组件方法的完整实现。 ### 父组件调用子组件方法 #### Vue 2 实现方式 在 Vue 2 中，父组件通过 `this.$refs` 获取子组件实例...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值