快捷導(dǎo)航

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)文章

Vue中Rule的使用方式
這篇文章主要介紹了Vue中Rule的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02
基于vue的fullpage.js單頁(yè)滾動(dòng)插件
這篇文章主要為大家詳細(xì)介紹了基于vue的fullpage.js單頁(yè)滾動(dòng)插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
在vuex中有四大金剛分別是State， Mutations，Actions，Getters，本文對(duì)這四大金剛做了詳細(xì)介紹，本文重點(diǎn)是給大家介紹vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用，感興趣的朋友一起看看吧
2018-04-04
詳解Vue中的MVVM原理和實(shí)現(xiàn)方法
這篇文章主要介紹了Vue中的MVVM原理和實(shí)現(xiàn)方法，文中講解非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
2020-07-07
vue使用自定義指令實(shí)現(xiàn)一鍵復(fù)制功能
在Vue中,通過(guò)自定義指令v-copy和document.execCommand方法,可以實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制內(nèi)容到剪貼板的功能,適用于處理長(zhǎng)文本或多行文本的復(fù)制需求,而readonly屬性可避免內(nèi)容被修改和移動(dòng)設(shè)備上的虛擬鍵盤干擾,感興趣的朋友一起看看吧
2024-09-09
vue 項(xiàng)目全屏插件screenfull使用案例
這篇文章主要介紹了vue 項(xiàng)目全屏插件screenfull使用案例,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2023-12-12
基于vue2框架的機(jī)器人自動(dòng)回復(fù)mini-project實(shí)例代碼
本篇文章主要介紹了基于vue2框架的機(jī)器人自動(dòng)回復(fù)mini-project實(shí)例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-06-06
vue中的H5移動(dòng)端項(xiàng)目?真機(jī)測(cè)試配置方式
這篇文章主要介紹了vue中的H5移動(dòng)端項(xiàng)目?真機(jī)測(cè)試配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue項(xiàng)目設(shè)置@路徑提示,@代替src方式
文章介紹了在Vue項(xiàng)目中配置`@`路徑提示的步驟,包括安裝`pathnpminstall path --save`、配置`vue.config.js`、安裝VSCode插件`Path Intellisense`、在`settings.json`中配置別名,并重啟VSCode
2025-11-11
詳解VueJS 數(shù)據(jù)驅(qū)動(dòng)和依賴追蹤分析
這篇文章主要介紹了詳解VueJS 數(shù)據(jù)驅(qū)動(dòng)和依賴追蹤分析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07