vue3 父子组件通信

最新推荐文章于 2025-06-06 01:31:59 发布

原创最新推荐文章于 2025-06-06 01:31:59 发布

· 102 阅读

0 ·

版权

文章标签：

#前端 #javascript #vue.js

子组件中提交数据

export default {
  emits: ['update:url', 'uploadChange'], // 在setup()之外声明要emit的事件名
  methods: {
    handleFileUploadSuccess(file) {
      // 提交事件
      this.$emit("update:url", file.response.data.previewUrl);
      this.$emit("uploadChange", file);
    }
  },
  // ...其他代码
}

父组件中接收数据 <script setup> 语法糖

<template>
  <Upload 
    v-model:url="state.form.avatar"
    @update:url="handleUrlUpdate"
    @uploadChange="handleUploadChange"
  />
</template>

<script setup>
import Upload from './path/to/Upload .vue';
import { ref } from 'vue';

const state = ref({
  form: {
    avatar: '' // 初始值
  }
});

const handleUrlUpdate = (url) => {
  state.value.form.avatar = url;
};

const handleUploadChange = (file) => {
  console.log('文件上传变化:', file);
};
</script>