Vue在父组件调用子组件的方法

已于 2022-07-21 14:54:19 修改
阅读量305 收藏
点赞数
分类专栏： vue js 笔记 文章标签： vue.js 前端 javascript
于 2021-07-23 18:15:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49194578/article/details/119041740
版权
笔记 同时被 3 个专栏收录
53 篇文章 1 订阅
订阅专栏
vue
43 篇文章 4 订阅
订阅专栏
js
31 篇文章 0 订阅
订阅专栏
本文介绍了Vue中父子组件间的通信方式，通过在父组件中为子组件添加ref属性，然后使用this.$refs调用子组件的方法。示例展示了如何在父组件中触发子组件的showAllInfo方法，并传递参数。子组件则响应此方法，调用API获取数据并更新状态。此外，还提及了子组件如何调用父组件的方法。
摘要由CSDN通过智能技术生成

当我们部署子组件的时候 在标签种添加一个 ref属性。给子属性一个名称，
稍后我们就能使用this.$refs.名称.方法名；对子组件的方法进行调用了。。
子组件不用配置什么。老老实实是呆着就好
子组件的方法

showAllInfo(userId) {
      getAllInfoApi(userId).then(res => {
        this.userAllInfo = res.data
        console.log(this.userAllInfo)
        this.drawer = true
      })
    }

eg：
父组件部署子组件

<RightDrawer ref="drawer" :user-id="row.id" @refreshList="refreshList" />

父组件调用子组件方法

handleUpdate(row) {
	this.$refs.drawer.showAllInfo(row.id)
}

子组件调用父组件的方法

写代码要喊出来
关注
专栏目录
Vue2中子组件调用父组件的方法，父组件调用子组件的方法，父子组件互相传值和方法调用
共同学习，共同成长
05-10 5788
Vue2中子组件调用父组件的方法，父组件调用子组件的方法，父子组件互相传值和方法调用
vue 父组件中调用子组件的方法
qq_29236119的博客
02-02 3527
Vue项目中如何在父组件中直接调用子组件的方法： 方案一：通过ref直接调用子组件的方法； //父组件中 <template> <div> <Button @click="handleClick">点击调用子组件方法</Button> <Child ref="child"/> </div> </template> <script> import Chil
vue中父组件调用子组件函数
weixin_34149796的博客
04-09 294
用法： 子组件上定义ref="refName", 父组件的方法中用 this.$refs.refName.method去调用子组件方法 详解： 父组件里面调用子组件的函数，父组件先把函数/方法以属性形式传给子组件；那么就需要先找到子组件对象 ，即 this.$refs.refName. 然后再进行调用，也就是this.$refs.refName.method 如下： 子组件： ...
vue 父组件调用子组件方法
最新发布
baidu_33164415的博客
09-29 594
vue 父组件调用子组件方法
Vue 父组件调用子组件函数的方法
weixin_30872867的博客
10-22 824
parent.vue（父组件的内容）： <template> <div @click="divClick"> <info-wnd ref="infoWnd"></info-wnd> 　　</div> </template> <script> import inf...
Vue 父组件调用子组件的方法
weixin_30852451的博客
04-13 163
qwq 前两天看了下vue，父子组件方法的调用，怕忘记，所以做个小记录。 一.父组件调用子组件的方法 1.父组件 <template> <div id="rightmenu8"> <rightmenu7 ref="rightmenu7"></rightmenu7> // ref要放在组件上 <button @cl...
vue 父组件中调用子组件函数的方法
10-16
在Vue.js框架中，父子组件之间的通信是常见的需求，其中父组件调用子组件的方法是实现特定功能的重要方式。以下详细介绍Vue中父组件调用子组件函数的方法及其知识点。 首先，要理解Vue组件的定义与引用方式。一个...
vue 父组件调用子组件方法及事件
08-27
在 Vue 中，还有另一种方式可以实现父组件调用子组件事件，即使用 `$emit` 方法在子组件中发出事件，然后在父组件中使用 `$on` 方法来监听事件。 例如，在上面的例子中，我们可以在子组件中定义 `callMethod` 方法...
vue父组件中调用子组件的方法
Dreamlandz的博客
07-26 2042
（1）通过ref直接调用子组件的方法 //父组件中 <template> <div> <Button @click="handleClick">点击调用子组件方法</Button> <Child ref="child"/> </div> </template> <script> import Child from './child'; export
vue父组件调用子组件的方法
m0_59023970的博客
03-25 1405
父组件调用子组件的方法
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_38552198的博客
01-06 331
通过ref直接调用子组件的方法； 1.子组件methods创建需调用方法 2.父组件声明ref <component ref="child" > 3.调用 export default { methods: { handleClick() { this.$refs.child.sing(); // sing为1创建...
vue父组件调用子组件的函数
qq_43532281的博客
01-18 706
用法： 子组件上定义ref="refName", 父组件的方法中用 this.$refs.refName.method 去调用子组件方法 详解： 父组件里面调用子组件的函数，父组件先把函数/方法以属性形式传给子组件；那么就需要先找到子组件对象 ，即 this.$refs.refName 然后再进行调用，也就是 this.$refs.refName.method 子组件： <template> <div> childComponent </div> &l
Vue父组件调用子组件的函数
qq_44849271的博客
05-08 3166
Vue父组件调用子组件的函数 该篇是父组件通过事件调用子组件的函数。例如父组件通过 点击事件 让子组件发请求。
Vue.js父组件调用子组件的方法
刘洪瑞的博客
01-30 287
WeChatefb25b299e2777386bceb39366232dde.png WeChata5fa1887021c5666249d69055a531978.png
vue中父组件调用子组件的方法函数
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
04-11 520
用法： 子组件上定义ref="refName", 父组件的方法中用this.$refs.refName.method去调用子组件方法 详解： 父组件里面调用子组件的函数，父组件先把函数/方法以属性形式传给子组件；那么就需要先找到子组件对象 ，即 this.$refs.refName.XX()方法 然后再进行调用，也就是this.$refs.refName.method 举个例子：...
vue在父组件调用子组件的方法
08-31
在Vue中，父组件可以通过`ref`属性来引用子组件，并直接调用子组件的方法。 首先，在子组件的标签上添加`ref`属性，例如： ```html <!-- 子组件内容 --> export default { methods: { childMethod() { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值