vue父組件如何獲取子組件的值
更新時間：2024年06月25日 11:04:27 作者：CV猿碼人
這篇文章主要介紹了vue父組件如何獲取子組件的值,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
子組件被點擊時觸發(fā)@node-click="handleNodeClick"
<el-tree
:data="optionData"
:props="props"
highlight-current
@node-click="handleNodeClick"
>向父級傳遞值
handleNodeClick (node) {
this.$emit('getval', node)
}父組件
<SelectTree
ref="menuParentTree"
:props="{
value: 'id', // ID字段名
label: 'text', // 顯示名稱
children: 'children' // 子級字段名
}"
:value="wbsTreeData.name"
:data="wbsTreeData"
@getValue="(value) => {inputForm.parentName=value}"
@getval='testData'
v-on="$listeners"
@node-click="handleNodeClick"
/>有時候需要添加v-on="$listeners"
接收子組件的值
testData (value) {
if (value.type !== '2')
this.$message.warning('請選擇分項')
}總結(jié)
子 handleNodeClick (node) {
this.$emit('getval', node)
}
父 @getval='testData'
testData (value) {
if (value.type !== '2')
this.$message.warning('請選擇分項')
}到此這篇關(guān)于vue父組件獲取子組件的值的文章就介紹到這了,更多相關(guān)vue父組件獲取子組件的值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
基于axios 的responseType類型的設(shè)置方法
今天小編就為大家分享一篇基于axios 的responseType類型的設(shè)置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
使用vue-route 的 beforeEach 實現(xiàn)導航守衛(wèi)(路由跳轉(zhuǎn)前驗證登錄)功能
在網(wǎng)站中普遍會遇到這樣的需求，路由跳轉(zhuǎn)前做一些驗證，比如登錄驗證（未登錄去登錄頁）。下面腳本之家小編給大家?guī)砹耸褂胿ue-route 的 beforeEach 實現(xiàn)導航守衛(wèi)(路由跳轉(zhuǎn)前驗證登錄)功能，感興趣的朋友一起看看吧2018-03-03
這篇文章主要給大家介紹了關(guān)于Vite內(nèi)網(wǎng)ip訪問的2種配置方式,文中通過實例代碼介紹的非常詳細,對大家學習或者使用Vite具有一定的參考學習價值,需要的朋友可以參考下2023-07-07
Vue+Element ui實現(xiàn)樹形控件右鍵菜單
這篇文章主要為大家詳細介紹了Vue+Element ui實現(xiàn)樹形控件右鍵菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
vue-cli-service不是內(nèi)部或外部命令,也不是可運行的程序或批處理文件問題
在Vue項目構(gòu)建過程中,如果遇到無法識別'vue-cli-service'命令的錯誤提示,通常是因為沒有全局安裝vue-cli,解決這個問題的步驟主要包括：首先檢查Vue版本,如果未安裝則先安裝Vue；其次全局安裝vue-cli；若在安裝過程中遇到cnpm命令找不到的情況2024-10-10
這篇文章主要介紹了Vue為什么要謹慎使用$attrs與$listeners，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-08-08
這篇文章主要為大家介紹了Vue編譯器解析compile源碼解析示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章介紹了Vue.js中v-for指令的用法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
這篇文章主要和大家一起簡單學習一下vue指令：directive，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
element表格el-table實現(xiàn)虛擬滾動解決卡頓問題
當頁面數(shù)據(jù)過多,前端渲染大量的DOM時,會造成頁面卡死問題,本文主要介紹了element表格el-table實現(xiàn)虛擬滾動解決卡頓問題,具有一定的參考價值,感興趣的可以了解一下2023-10-10