如何制作"two-way binding" Vue

Question

我有一个子组件，它的功能是上传照片。上传的照片分配给名为"photo"的子组件数据。我需要绑定父数据名为"file"带有名为"照片"的子数据。当"拍照"时;被更改为"文件">

子组件:

<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];
}
}
}

父组件:

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

Answer 1

您已经在您的BaseButton组件上使用了$emit。你也可以把它用于this.file。在子组件中，像这样:

uploadFile() {
this.file = this.$refs.file.files[0];
this.$emit('sendMyFile', this.file)
}

在你的父组件中，对动作作出反应:

<SelectPhoto @sendMyFile="getMyFile" :btn-label="text.RU.photoSelect.choosePhoto" v-model:file.sync="file"/>

同样在父组件中做你想做的the.file:

methods: {
getMyFile(file) {
// do something
}
}