一、解决方案：
1.在父组件向子组件传递 props 数据时，如果子组件在接收 props 数据之前尝试访问这些 props 数据，可能会导致报错。这是因为在组件加载和渲染过程中，父组件向子组件传递 props 数据是一个异步过程，子组件可能在接收到 props 数据之前就尝试访问它们。

为了避免这个错误，你可以在子组件中使用条件渲染或使用 v-if 判断父组件是否已经传递了对应的 props 数据。只有当 props 数据存在时，才访问它们。

例如，在子组件的模板中可以这样进行条件渲染：

<template>
  <div v-if="novelData">
    <!-- 在这里使用 novelData -->
  </div>
</template>

在子组件的 props 属性中，你也可以为每个传递的 props 设置默认值，以确保在父组件未传递相关 props 数据时，子组件不会出现报错。

export default {
  props: {
    novelData: {
      type: Object,
      default: () => ({}) // 设置默认值为空对象
    }
  },
  // ...
}

这样，即使父组件未传递 novelData 数据，子组件也会使用默认值来避免报错。

二、如果不行，则
2.按照以上想法写还是报错，这与我 传给子组件的数据格式有关系吗- obj{book:{cover:‘’},bank:{}},访问obj.book.cover时报错的

如果在子组件中访问 obj.book.cover 报错，有几种可能的原因：

2.1。 传递给子组件的数据不完整或为空。确保父组件向子组件传递的 obj 对象及其嵌套的 book 对象和 cover 属性都存在且不为空。

2.2. 子组件在访问 obj.book.cover 之前尚未接收到正确的数据。由于组件之间的数据传递是异步的，子组件可能在接收到数据之前就尝试访问它们。你可以使用条件渲染或 v-if 判断父组件是否已经传递了完整的数据，只有当数据存在时才渲染子组件。

2.3.在子组件中，可能存在其他代码或逻辑错误导致无法正确访问 obj.book.cover。请检查子组件中涉及到该属性的其他代码，并确保正确访问和处理该属性。

为了更准确地确定问题的原因，建议检查父组件向子组件传递的数据是否正确，并仔细查看子组件中访问和处理数据的代码。

三、注意：注意这是vue3 props 就算为空 输出也是props Proxy(Object) {}，所以v-if没有数据也能渲染组件

在 Vue 3 中，使用组合式 API 和 props 时，即使传递的 props 数据为空，props 也会是一个 Proxy 对象，而不是 undefined。这可能导致在访问嵌套属性时出现报错。

如果你的 obj.book.cover 报错并且 obj 和 obj.book 都存在，有几个可能的原因：

obj.book 是一个响应式对象，但 cover 属性不存在。在访问 obj.book.cover 之前，你需要确保 cover 属性在对象中存在。

obj 或 obj.book 是非响应式对象。在 Vue 3 的组合式 API 中，默认情况下，props 是非响应式的。如果你需要在子组件中使用响应式的 props，你可以使用 toRef 或 toRefs 函数将其转换为响应式对象。

子组件中存在其他代码或逻辑错误导致无法正确访问 obj.book.cover。请检查子组件中涉及到该属性的其他代码，并确保正确访问和处理该属性。

为了更准确地确定问题的原因，建议检查 obj、obj.book 和 cover 属性的存在与否，以及是否正确访问和处理这些属性。

四、转化为响应式对象
在 Vue 3 的组合式 API 中，可以使用 toRef 或 toRefs 函数将嵌套的对象转换为响应式对象。

toRef 函数可以用于将嵌套对象的单个属性转换为响应式对象。它接收两个参数：源对象和属性键名。例如：

import { toRef } from 'vue';

// 假设你有一个 props 对象 { obj: { book: { cover: '' } } }
const obj = toRef(props, 'obj');

// 现在 obj 是一个响应式对象，可以通过 obj.value 访问其值
console.log(obj.value.book.cover);

toRefs 函数用于将嵌套对象的所有属性都转换为响应式对象的引用。它接收一个源对象作为参数，并返回一个包含所有属性引用的新对象。例如：

import { toRefs } from 'vue';

// 假设你有一个 props 对象 { obj: { book: { cover: '' } } }
const refs = toRefs(props.obj);

// 现在 refs 是一个包含所有属性引用的对象
console.log(refs.book.value.cover);

在上面的例子中，props.obj 对象的属性引用被转换为响应式对象，可以通过 refs.book.value.cover 访问其值。

请注意，使用 toRef 或 toRefs 函数将嵌套对象转换为响应式对象后，你需要通过 .value 属性访问其值。

对了，如果props传递的是数组呢？怎么转成响应式
如果你要将传递的数组转换为响应式对象，你可以使用 toRef 或 toRefs 函数与 reactive 函数结合使用。

以下是使用 toRef 和 reactive 将数组转换为响应式对象的示例：

import { reactive, toRef } from 'vue';

const propsArray = reactive({
  array: toRef(props, 'array')
});

在这个示例中，我们使用 reactive 函数创建了一个响应式对象 propsArray，其中的 array 属性是通过 toRef 函数将传递的数组转换而来的。

现在，你可以像访问普通对象的属性一样访问 propsArray.array，并且它将具有响应式的特性。

另一种方法是使用 toRefs 函数与 reactive 函数结合使用，将整个数组转换为响应式对象：

import { reactive, toRefs } from 'vue';

const propsObj = reactive(toRefs(props));

在这个示例中，我们使用 toRefs 函数将传递的整个 props 对象转换为响应式对象，并使用 reactive 函数将其包装起来。

现在，你可以像访问普通对象的属性一样访问 propsObj.array，并且它将具有响应式的特性。

无论是使用 toRef 还是 toRefs，都可以将传递的数组转换为响应式对象。选择使用哪种方法取决于你的需求和代码结构。

五。变成响应式如何赋值给变量
一旦使用 toRef 或 toRefs 将嵌套对象转换为响应式对象，你可以将其赋值给一个变量以便在组件中使用。

如果你使用的是 toRef，你可以直接将响应式对象赋值给变量：

import { toRef } from 'vue';

const obj = toRef(props, 'obj');
// 现在 obj 是一个响应式对象

// 将 obj 的值赋给一个变量
const objValue = obj.value;

如果你使用的是 toRefs，你需要使用解构赋值将响应式对象的属性解构到变量中：

import { toRefs } from 'vue';

const refs = toRefs(props.obj);
// 现在 refs 是一个包含所有属性引用的对象

// 将属性解构到变量中
const { book } = refs;
const { cover } = book;

// 或者直接解构到变量中
const { book: { cover } } = refs;

六、需要注意的是，当使用 toRef 或 toRefs 函数将嵌套对象转换为响应式对象时，你需要通过 .value 属性访问其值，怎么说

对的，使用 toRef 或 toRefs 函数将嵌套对象转换为响应式对象后，你需要通过 .value 属性访问其值。

这是因为 toRef 和 toRefs 函数返回的是一个包含响应式对象的引用，而不是直接的对象值。为了访问实际的值，你需要通过 .value 属性来获取。

以下是一个示例，展示了如何使用 .value 属性来访问响应式对象的值

import { toRef } from 'vue';

const obj = toRef(props, 'obj');
console.log(obj.value); // 访问响应式对象的值

如果你使用 toRefs 函数，则需要在解构对象时同样使用 .value 属性：

import { toRefs } from 'vue';

const refs = toRefs(props.obj);
console.log(refs.book.value.cover); // 访问嵌套属性的值

如果你使用 toRefs 函数，则需要在解构对象时同样使用 .value 属性：

import { toRefs } from 'vue';

const refs = toRefs(props.obj);
console.log(refs.book.value.cover); // 访问嵌套属性的值

通过使用 .value 属性，你可以访问到响应式对象的实际值，并确保在数据更新时能够正确地获取最新的值。

最后：重要
通过以上方式至少页面能够正确渲染，但是仍然可能报错，如果还是有错误信息，请关掉控制台 请参考如下：
通过以下方式检查 obj 变量是否存在及其 cover 属性是否被正确设置：

1.在组件的 setup() 方法中，先将父组件传递的 obj 对象解构出来：const { obj } = props;
2.然后使用 JavaScript 的可选链运算符 ?. 来访问 cover 属性：const coverUrl = obj?.cover;
3.如果 obj 为 null 或 undefined，则 coverUrl 将会是 undefined，否则它将是 obj.cover 的值。

/** 重点：绑定值 使用 ‘?.’，如 obj?.name */
<template>
  <div>
    <img :src="coverUrl" />
  </div>
</template>

<script>
export default {
  props: {
    obj: {
      type: Object,
      required: true,
    },
  },
  setup(props) {
    const { obj } = props;
    const coverUrl = obj?.cover;

    return {
      coverUrl,
    };
  },
};
</script>