vue父組件中獲取子組件中的數據

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

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

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

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

方法二：$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="上傳營業執照" 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>

 

2017.12.21更新

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

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

 

注意問題：

1、父組件相應事件寫在該子組件上

2、子組件如果並沒有click事件觸發，也沒有類似本例input需要change事件觸發，則在created或者mounted函數中讓該函數加載即可

3、子組件向父組件傳值需 是父組件 用到了 ，如果多個父組件引用了該子組件，則只有傳值的時候用的子組件來自哪個父組件，這個父組件才可以接收到值，其他父組件獲取不到子組件傳的值。