I have child component which function is to upload a photo. Uploaded photo assigned to child component data named "photo". I need to bind parent data named "file" with child data named "photo". And when "photo" is changed "file" should be changed too.
Child component:
<template>
<div class="select">
<img v-if="previewFile" :src="previewFile" alt="" />
<img v-else src="/images/empty.jpg" alt="" />
<label class="btn" for="image-upload">{{ btnLabel }}</label>
<input id="image-upload" type="file" ref="file" @change="uploadFile" />
</div>
</template>
import { mapGetters } from "vuex";
export default {
name: "SelectPhoto",
data() {
return {
file: null,
previewFile: null,
};
},
methods: {
uploadFile() {
this.file = this.$refs.file.files[0];
}
}
}Parent component:
<template>
<SelectPhoto :btn-label="text.RU.photoSelect.choosePhoto" v-model:file.sync="file"/>
<BaseButton :label="text.RU.photoSelect.knowName" @do="$emit('getResult', file, previewFile)" />
</template>
<script>
export default {
data() {
return {
file: null,
};
},
};
</script>You already used $emit on your BaseButton component. You could also use it for this.file. In your child component like this:
uploadFile() {
this.file = this.$refs.file.files[0];
this.$emit('sendMyFile', this.file)
}
In you parent component, to react to the action:
<SelectPhoto @sendMyFile="getMyFile" :btn-label="text.RU.photoSelect.choosePhoto" v-model:file.sync="file"/>
Also in the parent component do what you want with the the.file:
methods: {
getMyFile(file) {
// do something
}
}