vue父组件直接操作子组件的方法（不通过$emit和$on）

最新推荐文章于 2024-08-07 14:55:26 发布
最新推荐文章于 2024-08-07 14:55:26 发布
阅读量920 收藏
点赞数 1
分类专栏： vue js UI框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40816649/article/details/94400627
版权
js 同时被 3 个专栏收录
112 篇文章 2 订阅
订阅专栏
vue
64 篇文章 1 订阅
订阅专栏
UI框架
6 篇文章 0 订阅
订阅专栏

今天再用element ui的时候走马灯有个发方法直接是通过this.$refs.carousel.prev()来控制走马灯的切换下一张的动作。
之前父组件触发子组件的方法都是$emit和$on配合完成的。

从走马灯的案例中启发了一个思路

1父组件引入使用组件直接给组件绑定ref名字。
2.子组件中在methods中定义任意方法。
3.父组件中直接this.$refs.name.fn()

以上3步父组件可以直接触发子组件的方法

养只猫
关注
专栏目录
Vue父组件中调用子组件的方法
qq_42551543的博客
10-13 225
Vue父组件中调用子组件的方法
Vue 子传父，props变量值类型为对象，可以不用$emit方法
weixin_42466185的博客
11-18 598
对象的引用，引用的是地址，因此父子组件中的index是同一个对象，子组件修改数据便不存在父子组件数据冲突的隐患；反之，如果是普通的字符串，数值型变量，变量的引用/传递等同于开辟了一个新的空间，因此改变内容后会出现两者数据的冲突
vue父组件调用子组件方法，子组件调用父组件方法
最新发布
Shining_F的博客
08-07 882
在父组件中给子组件添加一个自定义函数，把父组件中的方法传递进去。子组件通过ths.$emit来触发父组件函数。2、直接在子组件中通过“this.$parent.event”来调用父组件的方法。3、父组件把方法传入子组件中,在子组件里直接调用。
vue子组件修改父组件的值 不使用 $emit 父组件获取子组件的实例
qq769298218的博客
11-04 534
vue子组件修改父组件的值 不使用 $emit
vue父组件获取子组件中的内容，不通过$emit
honeymoon_的博客
07-20 711
需求场景： 子组件中存在表单 button按钮存在于父组件中 点击父组件的button验证子组件的表单 此时，子组件的表单无法使用$emit，那么，父组件如何获取子组件表单中的数据呢？父组件如何验证子组件的表单呢？ 解决： 在父组件中引入的子组件添加ref属性 <RiskForm ref="riskForm" /> 子组件的表单也具有ref属性 <el-form class="risk-form" :rules="rules" ref="riskFormRef"
vue传参数：子传父 this.$emit('input',val)
string佳佳的博客
12-05 1万+
子组件在传值的时候，选用input，如this.$emit(‘input’,val)，在父组件直接用v-model绑定，就可以获取到了 如果你不用input，则需要常规的@方法获取值，并用jq代码给kcrid赋值。 ...
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
10-18
通过上述代码示例和解释，我们可以了解到如何在Vue.js中正确地使用$on和$emit方法来实现父子组件间自定义事件的通信。当遇到父组件无法监听子组件事件的问题时，可以通过在子组件内部使用$parent.$emit来解决。这样...
Vue $emit()不能触发父组件方法的原因及解决
10-15
在Vue.js中，组件间的通信是通过事件和监听器来实现的，其中 `$emit` 是子组件用来触发自定义事件的关键方法。当遇到 `$emit` 无法触发父组件方法的情况，开发者可能会感到困惑。本文将深入探讨这个问题的原因以及...
Vue $emit $refs子父组件间方法的调用实例
10-18
Vue提供了多种机制来实现子组件与父组件之间的通信，而`$emit`和`$refs`是其中两种常用的方法。以下是对给定文件中提到的使用`$emit`和`$refs`实现子父组件间方法调用的知识点的详细解释。 ### $emit在子组件中的...
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
08-27
Vue 中的 $emit 与 $on 父子组件与兄弟组件之间的通信方式 在 Vue 中，$emit 与 $on 是两个非常重要的函数，它们用于实现组件之间的数据传输。下面，我们将详细介绍 Vue 中的 $emit 与 $on 父子组件与兄弟组件之间...
vue中的父子组件传值props和$emit(event,args)
SeeU
07-24 719
props 父组件传值：<div :propA='data'> 子组件接收值： props: { // 基础的类型检查 (`null` 匹配任何类型) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 带有默认值的数字 propD: {
vue父组件调用子组件中的方法、值的几种方式
高宇辰
08-12 7981
直接在父组件内部给子组件标签添加ref属性，然后通过ref属性来调用子组件的方法。
Vue.js父组件$on无法监听子组件$emit触发事件解决办法
wo_buzhidao的博客
03-05 1万+
Vue.js父组件$on无法监听子组件$emit触发事件解决办法 最近学习vuejs看例子中用$on无法监听子组件$emit触发事件： 使用版本 vue.js 2.2.5 参考文献 1.vuejs API 2.解决实例 问题分析 1.之前写的自定义组件事件触发为this.$emit("myclick",this.todo.text);，这样this指的是todo-item的每一...
Weex内置组件的使用——Weex的学习之路（五）
weitao_666的博客
05-22 1711
这几天忙着做组件化了，博客晚了些更新，说到组件化，我近期也会用博客来介绍的。上一篇博客我们讲的是weex的内置组件，那么这篇博客我们学习最后四个组件，下篇博客我们就会讲到世界weex页面的编写了。这篇博客我们来学习<waterfall>、<video>、<web>和<richtext>。weex的组件真的是要好好学牢固的，很多人可能会觉得定义太多记不...
Vue中父组件监听子组件事件时$emit的用法
yhj198927的博客
04-20 3675
$emit使用时需要满足以下两个条件： 1.父组件可以通过 Prop 向子组件传递数据 2.子组件可以使用 $emit方法监听父组件的自定义事件。 $emit 参数： {string} eventName [...args] eventName:指父组件注册的事件名称； args:父组件注册的事件参数，参数数量不限 请看如下代码： 1.父组件 <template> <div> <div style="font-weigh
vue 父组件调用子组件中的函数的两种方法
yehaocheng520的博客
08-10 9235
参考链接：vue 父组件调用子组件函数的两种方法https://www.jianshu.com/p/94c36323f733 1.$on $emit的组合使用 父组件调用子组件的函数，所以父组件中使用emit("函数名"，传递的参数)；子组件中监听此函数使用emit("函数名"，传递的参数)；子组件中监听此函数使用emit("函数名"，传递的参数)；子组件中监听此函数使用on(“函数名”，res=>{执行函数});res即为父组件传递给子组件的参数。 2.直接调用 举例如下： 父组件 <temp
在vue2.0中父组件如何触发子组件的自定义方法？
大灰狼的小绵羊哥哥的博客
03-10 3916
如果我在父组件的button上绑定了click事件，我想当点击button时可以触发子组件(单文件的子组件xx.vue)的某个方法（如fn1），要这样的效果该怎样实现？之前看了vue1的文档实例里面有methods和events这两者有什么区别，为什么在vue2去掉dispatch后我用emit('fn'),如果fn放在events会没有响应，而放在methods里面才会被触发到？ 子组件：
vue.js2.0父组件点击触发子组件方法
热门推荐
大灰狼的小绵羊哥哥的博客
03-10 4万+
{{ total }} Vue.component('button-counter', { template: '{{ counter }}', data: function () { return { counter: 0
vue 父组件调用子组件方法
Bloxed_shangyc的博客
11-09 4869
父组件里vue<component ref="transEvent" :is="childMsg.filter" > </component>js this.$refs.transEvent.handleReset()绑定ref属性子组件handleSave() { console.log("成功调用")
vue子组件调用父组件方法$emit没有生效
04-23
当Vue子组件调用父组件方法$emit没有生效时，可能有以下几个原因： 1. 事件名称不匹配：请确保子组件中使用$emit方法时，事件名称与父组件中监听的事件名称一致。例如，子组件中使用$emit('my-event')，则父组件中应该使用@my-event或v-on:my-event来监听。 2. 事件未注册：在父组件中监听子组件触发的事件之前，需要在父组件中注册该事件。可以通过在父组件的methods中定义一个方法，并在该方法中处理子组件触发的事件。 3. 父组件未传递方法给子组件：如果需要在子组件中调用父组件的方法，需要通过props将方法传递给子组件。请确保在父组件中将需要传递的方法通过props传递给子组件。 如果以上步骤都正确无误，但仍然无法生效，请检查以下几点： - 确认子组件和父组件之间的通信是否正常，可以通过在子组件中打印this.$parent来查看是否能够获取到父组件实例。 - 确认父组件中是否正确监听了子组件触发的事件，并且方法名是否正确。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值