Vue.js：如何从子组件AddSong获取Firebase音频URL到PlaylistDetails

你的核心问题是Vue3父子组件间的数据传递逻辑错误：AddSong作为子组件，上传音频后拿到的Firebase下载URL无法传递给父组件PlaylistDetails。下面是具体的问题拆解和修复步骤：

问题点梳理 #

1. 数据传递方向搞反：你试图通过props从子组件向父组件传值，但props是父→子的单向传递，子组件不能直接修改或反向传递props。
2. 传递的对象错误：AddSong中返回的audioFile是本地选中的文件对象，不是Firebase返回的下载URL；真正的URL存在useStorage返回的url ref中。
3. 事件未正确触发：子组件上传完成后没有向父组件发送数据更新的通知。

修复步骤 #

1. 修改AddSong.vue：上传完成后触发自定义事件传递URL #

使用Vue3的defineEmits定义自定义事件，在音频上传成功后将URL发送给父组件：

<script setup>
import { ref, defineProps, defineEmits } from 'vue';
import useStorage from '@/composables/useStorage';
import { use_doc } from '@/composables/use_doc';

// 定义接收的props和要触发的自定义事件
const props = defineProps(['playlist']);
const emit = defineEmits(['audio-uploaded']);

const audioFile = ref(null);
const { update_doc } = use_doc('playlists', props.playlist.id);
const { upload, url, filePath, error } = useStorage();

const handleFileChange = (event) => {
  audioFile.value = event.target.files[0];
};

const handleUpload = async () => {
  if (!audioFile.value) return;
  
  try {
    await upload(audioFile.value);
    console.log('Audio file URL:', url.value);
    
    // 上传成功后，向父组件传递音频数据
    if (url.value) {
      emit('audio-uploaded', {
        url: url.value,
        filePath: filePath.value,
        fileName: audioFile.value.name,
        title: title.value, // 如果你有歌曲标题输入框
        artist: artist.value // 如果你有歌手输入框
      });
    }
  } catch (err) {
    console.error('Error uploading audio file:', err.message);
    if (error.value) console.error('Storage error:', error.value);
  }
};

// 保留你的其他变量：title、artist、handleSubmit等
</script>

2. 修改PlaylistDetails.vue：监听子组件事件接收URL #

在父组件中监听子组件的自定义事件，接收音频URL并更新播放列表：

<template>
  <div class="playlist-details">
    <!-- 渲染AddSong组件并绑定事件 -->
    <AddSong 
      :playlist="playlist" 
      @audio-uploaded="handleAudioAdded"
    />
    
    <!-- 测试显示上传后的URL -->
    <p v-if="latestAudioUrl">最新上传音频URL: {{ latestAudioUrl }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import AddSong from '@/components/AddSong.vue';

const props = defineProps(['playlist']);
const latestAudioUrl = ref(null);

// 接收子组件传递的音频数据并更新播放列表
const handleAudioAdded = async (audioData) => {
  latestAudioUrl.value = audioData.url;
  
  // 将音频URL添加到Firebase的playlists文档中
  try {
    // 假设playlist中有songs数组字段，追加新音频
    await update_doc({
      songs: [...props.playlist.songs || [], audioData]
    });
    console.log('音频已添加到播放列表');
  } catch (err) {
    console.error('更新播放列表失败:', err);
  }
};
</script>

3. 优化useStorage.js：修复错误处理和路径区分 #

把音频和封面的存储路径区分开，同时不要吞掉错误：

import { projectStorage } from "@/firebase/config";
import { ref } from "vue";
import getUser from "./getUser";

const { user } = getUser();

const useStorage = () => {
  const error = ref(null);
  const url = ref(null);
  const filePath = ref(null);

  const upload = async (file, folder = 'audios') => {
    if (!user.value) {
      error.value = "用户未登录，无法上传文件";
      return;
    }
    
    // 根据传入的文件夹区分音频和封面
    filePath.value = `${folder}/${user.value.uid}/${file.name}`; 
    const storageRef = projectStorage.ref(filePath.value);

    try {
      const uploadTask = await storageRef.put(file);
      url.value = await uploadTask.ref.getDownloadURL();
      error.value = null;
    } catch (err) {
      console.error('存储上传错误:', err);
      error.value = err.message;
    }
  };

  return { url, filePath, error, upload };
};

export default useStorage;

核心知识点总结 #

• Vue3中子→父组件通信必须用自定义事件（defineEmits），props仅用于父→子单向传递。
• 上传成功后要传递的是Firebase返回的url.value（下载链接），而非本地的文件对象。
• 更新播放列表时，直接调用update_doc将音频数据追加到playlist的songs数组中即可。

内容的提问来源于stack exchange，提问作者Simplylmk