vue中父组件怎么调用子组件

前言

前段时间，写了个地址的控件，封装成了一个子组件，在其他页面共用。
原文地址：vue利用级联选择器实现全国省市区乡村五级菜单联动

然后当时出现了个bug，也没有太注意，后来才发现的。就是重置不了地址栏里面的信息，于是今天又写了写。

思路

在子组件里面写了个清空地址栏的方法，如下：

cleanModel(){this.selectedOptions = [];},

然后在父组件引用地址栏的地方写：
ref="resetArea"
完整代码如下：

 <!-- 地址组件 --><address-utils:size="mini":placeholder="checkdiqu"ref="resetArea"@getCheckedAddressInfo="getCheckedAddressInfo"></address-utils>

在重置的按钮处调用子组件中清空地址的方法：

//清空地址栏的信息(调用子组件的方法)this.$refs.resetArea.cleanModel();

最后就可以啦！

vue中父组件怎么调用子组件相关推荐

vue父组件如何调用子组件里面的方法
在vue里,父组件要调用子组件里边定义的方法,可以通过ref属性来获取到子组件的方法并执行,下面直接贴上子组件和父组件的代码吧! 父组件代码: <template><div clas ...
vue中el-dialog弹窗关闭，子组件控制父组件
1.父组件页面中的点击事件控制子组件的弹窗出现 2.子组件页面有个叉叉,点了之后关闭当前页面 <div class="databtn" @click="record ...
父组件如何调用子组件中的方法？
父组件代码,假如父组件要关闭弹窗时候,需要做一系列操作,例如关闭弹窗时需要将子组件中的内容恢复成原来的样子,那么该如何调用呢? 1.首先应该在子组件上面加一个ref,例如:ref="chil ...
vue 父组件调用子组件方法ref
一.ref被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的$refs对象上 vue中如果父组件想调用子组件的方法,可以在子组件中加上ref,然后通过this.$refs.ref.metho ...
Vue父组件调用子组件的方法（ref）
vue中如果父组件想调用子组件的方法,可以在子组件中加上ref, 然后通过this.$refs.ref.method调用,例如: 父组件: <template> <div @cl ...
vue 踩坑--父组件调用子组件方法，报错
父组件,调用子组件的方法,报如下错误分析解决:1.可能子页面加载未完成,父组件调用子组件方法加延时处理 setTimeout(() => {this.$refs.notice.getInfo( ...
vue3父组件调用子组件的方法
东风vue3父组件调用子组件的方法是通过expose和ref来实现的,我们可以通过expose来控制父组件可以访问子组件那些的方法和对象,我们将通过setup api(组合式 api)和option ...
react父组件调用子组件方法
前期我们说了父子组件互相通过props传递数据的方法,这个应该都可以理解. 其实今天说的这个父组件直接调用子组件方法, 也类似. 先看代码,比较直观. import React, {Componen ...
React 父组件调用子组件方法
solution Q:React中,父组件如何调用子组件的方法? task 利用props传值解决,不使用ref 我们知道父组件可以靠子组件调用函数传参作为返回值,那么同样道理,函数也能作为参数从子组 ...

vue中父组件怎么调用子组件

前言

思路

vue中父组件怎么调用子组件相关推荐

最新文章

热门文章