vue3组件传值详细使用

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

1. 在 Vue 3 中使用 TypeScript 和 `setup` 语法糖时，可以通过 `emit` 和 `props` 来实现子组件向父组件传递数据。以下是一个示例，展示如何在子组件 `Left.vue` 中获取后端返回的 `urlLink` 字段，并将其传递给父组件 `Index.vue`，然后在父组件中点击按钮时触发跳转。
3. ### 子组件 `Left.vue`
5. <template>
6.   <div>
7.     <!-- 子组件的内容 -->
8.   </div>
9. </template>
11. <script lang="ts" setup>
12. import { ref, onMounted } from 'vue';
14. const emit = defineEmits(['urlLinkUpdated']);
15. const urlLink = ref('');
17. const fetchUrlLink = async () => {
18.   // 模拟后端返回的 urlLink
19.   const mockUrlLink = 'https://www.example.com';
20.   urlLink.value = mockUrlLink;
21.   // 将 urlLink 发射给父组件
22.   emit('urlLinkUpdated', urlLink.value);
23. };
25. onMounted(() => {
26.   fetchUrlLink();
27. });
28. </script>
30. <style scoped>
31. /* 子组件的样式 */
32. </style>
33. ```
35. ### 父组件 `Index.vue`
37. <template>
38.   <div>
39.     <Left @urlLinkUpdated="handleUrlLinkUpdated" />
40.     <button @click="navigateToUrl">Go to URL</button>
41.   </div>
42. </template>
44. <script lang="ts" setup>
45. import { ref } from 'vue';
46. import Left from './Left.vue';
48. const urlLink = ref('');
50. const handleUrlLinkUpdated = (link: string) => {
51.   urlLink.value = link;
52. };
54. const navigateToUrl = () => {
55.   if (urlLink.value) {
56.     window.location.href = urlLink.value;
57.   } else {
58.     alert('URL is not available.');
59.   }
60. };
61. </script>
63. <style scoped>
64. /* 父组件的样式 */
65. </style>
66. ```
68. ### 解释
70. 1. **子组件 `Left.vue`**：
71.    - 使用 `ref` 定义 `urlLink`。
72.    - 使用 `defineEmits` 定义父组件需要监听的事件。
73.    - 在 `onMounted` 生命周期钩子中调用 `fetchUrlLink` 方法，模拟从后端获取 `urlLink`。
74.    - 使用 `emit('urlLinkUpdated', urlLink.value)` 将 `urlLink` 发射给父组件。
76. 2. **父组件 `Index.vue`**：
77.    - 导入并使用子组件 `Left`。
78.    - 使用 `ref` 定义 `urlLink`。
79.    - 监听子组件发射的 `urlLinkUpdated` 事件，并在 `handleUrlLinkUpdated` 方法中更新父组件的 `urlLink` 数据。
80.    - 在按钮点击事件 `navigateToUrl` 中，检查 `urlLink` 是否有效，然后使用 `window.location.href` 进行跳转。
82. 通过这种方式，你可以将子组件中获取的 `urlLink` 传递给父组件，并在父组件中通过按钮点击事件触发跳转。

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。