vue父元件向子元件動態傳值的兩種方法

在一些專案需求中需要父元件向子元件動態傳值，比如我這裡的需求是，父元件動態通過axios獲取返回的url陣列然後傳給子元件，上傳的子元件拿到該陣列後進行遍歷並展示，因為有時候獲取到的會是空，所以這裡要考慮到動態獲取。

方法有兩種，

方法一：

props傳值，這裡注意乙個問題，傳過來的值需要用watch監聽並賦值，否則這裡獲取到的是空陣列

父元件：

<

uploadimg 
:width
="200"
:height
="200"
name
="productimage"
size
="750px*750px"
ref="productimage"
:src-list
="this.productimage"
>
uploadimg
>

this.productimage=res.data.cover;

這裡把通過後台返回的陣列賦值給

this.productimage，然後把該陣列傳給子元件定義的props屬性src-list

子元件：

watch:

},}

然後子元件成功動態獲取到該陣列

方法二：

通過ref屬性，父元件呼叫子元件的方法，把要傳的陣列作為引數傳給子元件，子元件獲取該引數，並使用

父元件：

this.$refs.productimage.getsrclist(res.data.cover);

子元件：

getsrclist(val)

同理，子元件向父元件傳值，如果是動態改變的，也要記得加watch函式，動態改變之後執行的操作寫在watch裡，比如 this.$emit 的函式！

見子元件向父元件傳值

vue子元件向父元件傳值。

1 子，父元件相互傳值。話不多說直接上 父元件向子元件傳值就是通過子元件定義的props 子元件 父元件 import modal from components common modal modal.vue import timecontrol from components common tim...

Vue父元件向子元件傳值

元件例項定義方式，注意 一定要使用props屬性來定義父元件傳遞過來的資料 建立 vue 例項，得到 viewmodel var vm newvue components script 使用v bind或簡化指令，將資料傳遞到子元件中 msg son div 原理 父元件將方法的引用，傳遞到子元件內...

vue子元件向父元件傳值

原理 父元件向子元件傳方法，子元件想辦法呼叫改方法 通過 this.emit 觸發父元件穿過來的方法 把子元件的資料當做該方法的引數傳遞進去，父元件就拿到了實參，得到了資料 子元件每當點選自己身上的button按鈕，就會觸發自己身上的myclick事件，在自身myclick方法裡面通過 this.e...