vue中父组件怎么调用子组件
【摘要】 前言前段时间,写了个地址的控件,封装成了一个子组件,在其他页面共用。原文地址:vue利用级联选择器实现全国省市区乡村五级菜单联动然后当时出现了个bug,也没有太注意,后来才发现的。就是重置不了地址栏里面的信息,于是今天又写了写。 思路在子组件里面写了个清空地址栏的方法,如下:cleanModel(){ this.selectedOptions = []; },然后在父组件引...
前言
前段时间,写了个地址的控件,封装成了一个子组件,在其他页面共用。
原文地址:vue利用级联选择器实现全国省市区乡村五级菜单联动
然后当时出现了个bug,也没有太注意,后来才发现的。就是重置不了地址栏里面的信息,于是今天又写了写。
思路
在子组件里面写了个清空地址栏的方法,如下:
cleanModel(){
this.selectedOptions = [];
},
然后在父组件引用地址栏的地方写:
ref="resetArea"
完整代码如下:
<!-- 地址组件 -->
<address-utils
:size="mini"
:placeholder="checkdiqu"
ref="resetArea"
@getCheckedAddressInfo="getCheckedAddressInfo">
</address-utils>
在重置的按钮处调用子组件中清空地址的方法:
//清空地址栏的信息(调用子组件的方法)
this.$refs.resetArea.cleanModel();
最后就可以啦!
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)