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

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

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

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

在一些項目需求中需要父組件向子組件動態(tài)傳值，比如我這里的需求是，父組件動態(tài)通過axios獲取返回的圖片url數(shù)組然后傳給子組件，上傳圖片的子組件拿到該數(shù)組后進行遍歷并展示圖片，因為有時候獲取到的會是空，所以這里要考慮到動態(tài)獲取。

方法有兩種，

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

props傳值，這里注意一個問題，傳過來的值需要用watch監(jiān)聽并賦值，否則這里獲取到的是空數(shù)組

父組件：

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

這里把通過后臺返回的數(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父組件向子組件動態(tài)傳值方法二：

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

父組件：

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

子組件：

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

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

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

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

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

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

給相應的子組件標簽上加 ref = “avatar”

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

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

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

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

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

注意問題：

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

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

您可能感興趣的文章: