如何在vue3组合API中获取道具

Question

我尝试编写一个容器组件“A”来布局第三方组件“Tree”，为了使用A，我使用“inheritAttrs”来获取“Tree”的所有道具和事件：

<template>
    <Tree v-bind="$attrs" />
</template>
<script lang="ts">
  export default {
    inheritAttrs: true,
  };
</script>
<script lang="ts" setup>
  import { Tree } from 'ant-design-vue';
  import { onMounted, PropType, toRef, unref, ref, toRefs } from 'vue';
  function A() {
      // this is not working
      console.log(props);
   }

</script>

如何在函数 A 中获得从“Tree”继承的一些 props 属性？

Answer 1

'继承属性'

首先，inheritAttrs并不意味着继承 props，inheritAttrs设置为 true 意味着继承属性（而不是props）并将这些属性绑定到组件的根节点。

什么是“属性”？

一些常见的有class、style、id、disabled和属性等required。minlength基本上所有原生 HTML 属性都是通过inheritAttrs.

如何访问props里面的对象<script setup>？

在组合 API 中，您需要显式定义props<script setup>才能使用props对象。

在使用 的单文件组件 (SFC) 中<script setup>，可以使用 DefineProps() 宏来声明 props：

<script setup>
   const props = defineProps(['foo'])

   console.log(props.foo)
</script>

...

阅读更多：如果我有一个prop与一个同名的怎么办？attribute怎么办？

让我们举一个例子。disabled您定义一个名为的 prop MyComponent.vue。

我的组件.vue

<template>
   <Tree v-bind="$attrs"/>
</template>
 
<script setup>
   const props =  defineProps({
      disabled: Boolean,
   })
       
   console.log(props.disabled); // this works
</script>

...然后像这样添加组件，传入disabled. 请注意，:disabled="true"和disabled在两种情况下都表示相同的意思 - 无论是否定义了 props。

应用程序.vue

<MyComponent disabled />

由于您使用定义了 props，defineProps()因此v-bind="$attrs"将不再作为对象disabled中的属性$attrs。这正如文档所解释的那样：

Vue 组件需要显式 props 声明，以便 Vue 知道传递给组件的外部 props 应被视为fallthrough 属性...

换句话说，如果您不定义props，它们将被视为attributes。

Answer 2

您可以使用 Typescript 和 Composition API ( <script setup lang="ts" />) 定义类型安全的 props，如下所示：

<script setup lang="ts">
const props = defineProps({
  foo: { type: String, required: true },
  bar: Number
})

props.foo // string
props.bar // number | undefined
</script>

然而，通过泛型类型参数定义纯类型的 props 通常更直接：

<script setup lang="ts">
interface Props {
  foo: string,
  bar?: number
}
const props = defineProps<Props>()

props.foo // string
props.bar // number | undefined
</script>

请参阅文档。如果您也想设置默认值。看这里