快捷導(dǎo)航

vue父組件中獲取子組件中的數(shù)據(jù)(實(shí)例講解)

更新時(shí)間：2017年09月27日 08:41:35 投稿：jingxian

下面小編就為大家?guī)?lái)一篇vue父組件中獲取子組件中的數(shù)據(jù)(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

如下所示：

<FormItem label="上傳頭像" prop="image">
   <uploadImg :width="150" :height="150" :name="'avatar'" size="150px*150px" ref="avatar"></uploadImg>
</FormItem>
 <FormItem label="上傳營(yíng)業(yè)執(zhí)照" prop="businessLicence">
 <uploadImg :width="350" :height="200" :name="'businessLicence'" size="350px*200px" ref="businessLicence"></uploadImg>
</FormItem>

自己寫(xiě)了個(gè)上傳圖片的子組件，父組件需要獲取到子組件上傳的圖片地址，

方法一：給相應(yīng)的子組件加ref

父組件在最后提交的時(shí)候獲取thi.$ref.avatar.相應(yīng)數(shù)據(jù)即可，因?yàn)樵谶@里才能保證圖片已經(jīng)上傳，否則如果圖片沒(méi)上傳，拿到的值一定為空。

方法二：$emit()

/*
  子組件
*/
<template>
  <input type='file' @change="changeUrl" />
</template>
<script>
export default {
  methods: {
    changeUrl(e) {
      this.$emit('changeUrl', e.currentTarget.files[0].path)
    }
  }
}
</script>
/*
  父組件
*/
<template>
  <FormItem label="上傳營(yíng)業(yè)執(zhí)照" prop="businessLicence">
    <uploadImg :width="350" :height="200" :name="'license'" size="350px*200px" @changeUrl="getUrl"></uploadImg>
  </FormItem>
</template>
<script>
export default {
  methods: {
    getUrl(path) {
      //這個(gè)就是你要的path,并且會(huì)雙向綁定
    }
  }
}
</script>

以上這篇vue父組件中獲取子組件中的數(shù)據(jù)(實(shí)例講解)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue vee-validate插件的簡(jiǎn)單使用
這個(gè)插件可以用來(lái)在未使用組件庫(kù),沒(méi)有自帶好的校驗(yàn)規(guī)則時(shí)使用,進(jìn)行表單校驗(yàn)，非常的實(shí)用，感興趣的朋友可以參考下本文，了解該插件的使用方法
2021-06-06
詳解Vue.js 響應(yīng)接口
這篇文章主要介紹了Vue.js 響應(yīng)接口的相關(guān)資料，文中實(shí)例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
2020-07-07
vue2之jessibuca視頻插件使用教程詳細(xì)講解
Jessibuca進(jìn)行直播流播放,為用戶帶來(lái)便捷、高效的視頻觀看體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于vue2之jessibuca視頻插件使用的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2024-09-09
Vue的基本知識(shí)你都了解嗎
這篇文章主要為大家詳細(xì)介紹了Vue的基本知識(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-02-02
Nuxt.js之自動(dòng)路由原理的實(shí)現(xiàn)方法
這篇文章主要介紹了Nuxt.js之自動(dòng)路由原理的實(shí)現(xiàn)方法，nuxt.js會(huì)根據(jù)pages目錄結(jié)構(gòu)自動(dòng)生成vue-router模塊的路由配置。非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2018-11-11
vuex(vue狀態(tài)管理)的特殊應(yīng)用案例分享
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。
2020-03-03
vue2 webpack proxy與nginx配置方式
這篇文章主要介紹了vue2 webpack proxy與nginx配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue3子組件如何修改父組件傳過(guò)來(lái)的props數(shù)據(jù)
周所周知vue的props是單向數(shù)據(jù)流,可以從父組件中改變傳往子組件的props,反之則不行,下面這篇文章主要給大家介紹了關(guān)于vue3子組件如何修改父組件傳過(guò)來(lái)的props數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下
2022-10-10
Vue模板內(nèi)引入的組件樣式覆蓋失效原因及解決
這篇文章主要介紹了Vue模板內(nèi)引入的組件樣式覆蓋失效原因及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vuex2中使用mapGetters/mapActions報(bào)錯(cuò)的解決方法
這篇文章主要介紹了vuex2中使用mapGetters/mapActions報(bào)錯(cuò)解決方法 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-10-10