前言

前段時間，寫了個地址的控件，封裝成了一個子組件，在其他頁面共用。
原文地址：vue利用級聯選擇器實現全國省市區鄉村五級菜單聯動

然后當時出現了個bug，也沒有太注意，后來才發現的。就是重置不了地址欄里面的信息，于是今天又寫了寫。

思路

在子組件里面寫了個清空地址欄的方法，如下：

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

然后在父組件引用地址欄的地方寫：
ref="resetArea"
完整代碼如下：

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

在重置的按鈕處調用子組件中清空地址的方法：

//清空地址欄的信息(調用子組件的方法)this.$refs.resetArea.cleanModel();

最后就可以啦！

總結

以上是生活随笔為你收集整理的vue中父组件怎么调用子组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。