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