vue3组件传值具体使用

问：

left.vue文件调用接口获取了后端返回的urlLink字段，我该怎么传递给总的父组件index.vue中，我需要点击父组件的一个按钮来触发跳转？

回答：

在 Vue 3 中使用 TypeScript 和 `setup` 语法糖时，可以通过 `emit` 和 `props` 来实现子组件向父组件传递数据。以下是一个示例，展示如何在子组件 `Left.vue` 中获取后端返回的 `urlLink` 字段，并将其传递给父组件 `Index.vue`，然后在父组件中点击按钮时触发跳转。### 子组件 `Left.vue`<template><div><!-- 子组件的内容 --></div>
</template><script lang="ts" setup>
import { ref, onMounted } from 'vue';const emit = defineEmits(['urlLinkUpdated']);
const urlLink = ref('');const fetchUrlLink = async () => {// 模拟后端返回的 urlLinkconst mockUrlLink = 'https://www.example.com';urlLink.value = mockUrlLink;// 将 urlLink 发射给父组件emit('urlLinkUpdated', urlLink.value);
};onMounted(() => {fetchUrlLink();
});
</script><style scoped>
/* 子组件的样式 */
</style>
```### 父组件 `Index.vue`<template><div><Left @urlLinkUpdated="handleUrlLinkUpdated" /><button @click="navigateToUrl">Go to URL</button></div>
</template><script lang="ts" setup>
import { ref } from 'vue';
import Left from './Left.vue';const urlLink = ref('');const handleUrlLinkUpdated = (link: string) => {urlLink.value = link;
};const navigateToUrl = () => {if (urlLink.value) {window.location.href = urlLink.value;} else {alert('URL is not available.');}
};
</script><style scoped>
/* 父组件的样式 */
</style>
```### 解释1. **子组件 `Left.vue`**：- 使用 `ref` 定义 `urlLink`。- 使用 `defineEmits` 定义父组件需要监听的事件。- 在 `onMounted` 生命周期钩子中调用 `fetchUrlLink` 方法，模拟从后端获取 `urlLink`。- 使用 `emit('urlLinkUpdated', urlLink.value)` 将 `urlLink` 发射给父组件。2. **父组件 `Index.vue`**：- 导入并使用子组件 `Left`。- 使用 `ref` 定义 `urlLink`。- 监听子组件发射的 `urlLinkUpdated` 事件，并在 `handleUrlLinkUpdated` 方法中更新父组件的 `urlLink` 数据。- 在按钮点击事件 `navigateToUrl` 中，检查 `urlLink` 是否有效，然后使用 `window.location.href` 进行跳转。通过这种方式，你可以将子组件中获取的 `urlLink` 传递给父组件，并在父组件中通过按钮点击事件触发跳转。