Vue 3 子组件内容移动到父组件：终极指南，解决循环结构错误

vue.js

2024-03-14 00:05:24

Vue 3 中将子组件内容移动到父组件：终极指南

引言

在 Vue 3 开发中，偶尔需要将子组件的内容移动到父组件。传统方法是使用 defineSlots，但这会带来循环结构错误。本文将介绍一种使用 Vue 3 组合 API 的创新方法，该方法可以有效解决这个问题。

问题：defineSlots 的局限性

defineSlots 旨在允许子组件的内容被父组件插槽。但是，当子组件内容依赖于父组件数据时，就会出现循环结构，从而导致 "Converting circular structure to JSON" 错误。

解决方案：reactive、ref 和 watch

为了解决循环结构问题，我们可以使用 Vue 3 中的 reactive、ref 和 watch 组合 API。

reactive： 创建一个可响应的对象，用于存储子组件的内容。
ref： 在父组件中创建一个对子组件的引用。
watch： 监视子组件的响应式对象，并在其内容发生变化时将内容移动到父组件。

步骤

在子组件中使用 reactive 创建一个内容对象。
在父组件中使用 ref 创建一个对子组件的引用。
使用 watch 监视子组件的内容对象，并在其更新时将内容移动到父组件。

代码示例

子组件

<template>
  <p>{{ content.text }}</p>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const content = reactive({
      text: 'Lorem ipsum...'
    });

    return {
      content
    };
  }
};
</script>

父组件

<template>
  <div>
    <Child ref="childRef" />
    <p>{{ parentContent }}</p>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const childRef = ref(null);
    const parentContent = ref('');

    watch(() => childRef.value.content, (newVal) => {
      parentContent.value = newVal.text;
    }, { immediate: true });

    return {
      childRef,
      parentContent
    };
  }
};
</script>