快捷導(dǎo)航

vue父子組件動(dòng)態(tài)傳值的幾種方式及注意問(wèn)題詳解

更新時(shí)間：2022年12月24日 08:52:38 作者：xin_shou123

這篇文章主要介紹了vue父子組件動(dòng)態(tài)傳值的幾種方式及注意問(wèn)題詳解,需要的朋友可以參考下

1.vue父組件向子組件動(dòng)態(tài)傳值的兩種方法

在一些項(xiàng)目需求中需要父組件向子組件動(dòng)態(tài)傳值，比如我這里的需求是，父組件動(dòng)態(tài)通過(guò)axios獲取返回的圖片url數(shù)組然后傳給子組件，上傳圖片的子組件拿到該數(shù)組后進(jìn)行遍歷并展示圖片，因?yàn)橛袝r(shí)候獲取到的會(huì)是空，所以這里要考慮到動(dòng)態(tài)獲取。

方法有兩種，

vue父組件向子組件動(dòng)態(tài)傳值方法一：

props傳值，這里注意一個(gè)問(wèn)題，傳過(guò)來(lái)的值需要用watch監(jiān)聽(tīng)并賦值，否則這里獲取到的是空數(shù)組

父組件：

<uploadImg :width="200" :height="200" name="productImage" size="750px*750px" ref="productImage" :src-list="this.productImage"></uploadImg>
this.productImage=res.data.cover;

這里把通過(guò)后臺(tái)返回的數(shù)組賦值給this.productImage，然后把該數(shù)組傳給子組件定義的props屬性src-list

export default {
  name: '***',
  props: {
    srcList: {

    }
  },
  data() {
  	uploadImg: ''
  }
}

子組件：

watch代碼

watch:{
    srcList(curVal,oldVal){
     if(curVal){
       this.uploadImg=curVal;
      }
   },
}

vue父組件向子組件動(dòng)態(tài)傳值方法二：

通過(guò)ref屬性，父組件調(diào)用子組件的方法，把要傳的數(shù)組作為參數(shù)傳給子組件，子組件獲取該參數(shù)，并使用

父組件：

this.$refs.productImage.getSrcList(res.data.cover);

子組件：

getSrcList(val){
this.uploadImg=val;
}

同理，子組件向父組件傳值，如果是動(dòng)態(tài)改變的，也要記得加watch函數(shù)，動(dòng)態(tài)改變之后執(zhí)行的操作寫(xiě)在watch里，比如 this.$emit 的函數(shù)！

2.vue父組件中獲取子組件中的數(shù)據(jù)

<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è)上傳圖片的子組件，父組件需要獲取到子組件上傳的圖片地址，

vue父組件中獲取子組件中數(shù)據(jù)方法一：

給相應(yīng)的子組件標(biāo)簽上加 ref = “avatar”

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

vue父組件中獲取子組件中數(shù)據(jù)方法二：

$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>

當(dāng)使用this.$emit方法獲取的時(shí)候，如果子組件想要給父組件傳入多個(gè)值，則可以寫(xiě)多個(gè)參數(shù)，父組件在獲取的時(shí)候獲取多個(gè)參數(shù)的值即可

//父組件
getUrl(path1，path2) {
console.log(path1,path2)
}

注意問(wèn)題：

1、父組件相應(yīng)事件寫(xiě)在該子組件上
2、子組件如果并沒(méi)有click事件觸發(fā)，也沒(méi)有類(lèi)似本例input需要change事件觸發(fā)，則在created或者mounted函數(shù)中讓該函數(shù)加載即可
3、子組件向父組件傳值需是父組件用到了，如果多個(gè)父組件引用了該子組件，則只有傳值的時(shí)候用的子組件來(lái)自哪個(gè)父組件，這個(gè)父組件才可以接收到值，其他父組件獲取不到子組件傳的值。

以上就是vue父子組件動(dòng)態(tài)傳值的幾種方式及注意問(wèn)題詳解的詳細(xì)內(nèi)容，更多關(guān)于vue父子組件動(dòng)態(tài)傳值的幾種方式的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: