快捷導(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)文章

vue3路由router.push的使用以及問(wèn)題分析
頁(yè)面跳轉(zhuǎn)有很多方法,本次使用的是?vue-router,但卻在使用?router.push?的時(shí)候遇到了點(diǎn)麻煩,所以記錄下來(lái),希望可以幫助有需要的人
2023-09-09
vue實(shí)現(xiàn)給某個(gè)數(shù)據(jù)字段添加顏色
這篇文章主要介紹了vue實(shí)現(xiàn)給某個(gè)數(shù)據(jù)字段添加顏色方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
在vue中動(dòng)態(tài)修改css其中一個(gè)屬性值操作
這篇文章主要介紹了在vue中動(dòng)態(tài)修改css其中一個(gè)屬性值操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-12-12
使用Vue?CLI配置代碼壓縮、加密和混淆功能示例代碼
這篇文章主要介紹了使用Vue?CLI配置代碼壓縮、加密和混淆功能,通過(guò)配置 vue.config.js 文件，我們可以使用 Vue CLI 輕松實(shí)現(xiàn)對(duì) Vue 應(yīng)用程序代碼的壓縮、加密和混淆，需要的朋友可以參考下
2023-06-06
vue中l(wèi)et that=this的作用及說(shuō)明
這篇文章主要介紹了vue中l(wèi)et that=this的作用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue.js如何利用v-for循環(huán)生成動(dòng)態(tài)標(biāo)簽
這篇文章主要給大家介紹了關(guān)于Vue.js如何利用v-for循環(huán)生成動(dòng)態(tài)標(biāo)簽的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2022-01-01
vue中父組件通過(guò)props向子組件傳遞數(shù)據(jù)但子組件接收不到解決辦法
大家都知道可以使用props將父組件的數(shù)據(jù)傳給子組件,下面這篇文章主要給大家介紹了關(guān)于vue中父組件通過(guò)props向子組件傳遞數(shù)據(jù)但子組件接收不到的解決辦法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-01-01
vue項(xiàng)目部署到非根目錄下的問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目部署到非根目錄下的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue實(shí)現(xiàn)放大鏡效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
在Vue中使用CSS3實(shí)現(xiàn)內(nèi)容無(wú)縫滾動(dòng)的示例代碼
這篇文章主要介紹了在Vue中使用CSS3實(shí)現(xiàn)內(nèi)容無(wú)縫滾動(dòng)的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11