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