vue3中的父组件传递给子组件props的值是个ref的话，那么子组件接口的时候不需要.value了嘛？

  • Z时代
  • 2024-02-14
  • 分类：IT

就比如
父组件中定义了

const a = ref([])
<child :attr="a" />

子组件中
接受的时候

const props = defineProps({
    attr:{type:Array}
})
const b = props.attr

这时候不需要 props.attr.value 了嘛

回答：

在 Vue 3 中，当父组件传递一个 ref 类型的 prop 给子组件时，Vue 会自动为其解包（unwrapping）。所以在子组件中，你不需要使用 .value 来访问 ref 的值。

以下是一个简单的示例：

父组件：

<template>
  <div>
    <child :attr="a" />
  </div>
</template>
<script setup>
import { ref } from 'vue';
import Child from './Child.vue';
const a = ref([]);
</script>

子组件：

<template>
  <div>
    <p>Child Component</p>
    <pre>{{ b }}</pre>
  </div>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
  attr: {
    type: Array
  }
});
const b = props.attr;
</script>

在这个例子中，子组件可以直接访问 props.attr，而不需要使用 props.attr.value。

以上是 vue3中的父组件传递给子组件props的值是个ref的话，那么子组件接口的时候不需要.value了嘛？ 的全部内容， 来源链接： utcz.com/p/934041.html

回到顶部