vue3组件传值详细使用 - ToB企服应用市场:ToB评测及商务社交产业平台

在 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 () => {
// 模拟后端返回的 urlLink
const 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` 传递给父组件，并在父组件中通过按钮点击事件触发跳转。

复制代码