如何制作 "two-way binding" Vue

Question

我有子组件，其功能是上传照片。上传的照片分配给名为“照片”的子组件数据。我需要将名为“file”的父数据与名为“photo”的子数据绑定。当“照片”改变时，“文件”也应该改变。

子组件：

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

如何制作 "two-way binding" Vue

How to make "two-way binding" Vue

javascript

data-binding

components

vue.js

vue-component