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

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

下面小編就為大家?guī)硪黄獀ue父組件中獲取子組件中的數(shù)據(jù)(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

如下所示：

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

自己寫了個上傳圖片的子組件，父組件需要獲取到子組件上傳的圖片地址，

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

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

方法二：$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è)執(zhí)照" prop="businessLicence">
    <uploadImg :width="350" :height="200" :name="'license'" size="350px*200px" @changeUrl="getUrl"></uploadImg>
  </FormItem>
</template>
<script>
export default {
  methods: {
    getUrl(path) {
      //這個就是你要的path,并且會雙向綁定
    }
  }
}
</script>

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

您可能感興趣的文章:

相關(guān)文章

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