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

Question

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

<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”的属性属性？

Answer 1

'InheritAttrs'

首先，inheritAttrs不代表继承props，inheritAttrs设为true代表继承属性（不是 props）自动并将这些属性绑定到组件的根节点。

什么是'Attributes'？

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

寻址

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

在组合API中，您需要显式define<script setup>中的道具才能使用props对象。

在使用的单文件组件 (SFC) 中，可以使用 defineProps() 宏声明道具：

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

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

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

让我们举个例子。您在 MyComponent.vue.

中定义了一个名为 disabled 的道具

MyComponent.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。

App.vue

<MyComponent disabled />

自从您使用 defineProps() 定义道具后，v-bind="$attrs" 将不再将 disabled 作为 $attrs 对象中的属性。正如文档所解释的那样：

Vue components require explicit props declaration so that Vue knows what external props passed to the component should be treated as fallthrough attributes...

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

Answer 2

您可以使用 Typescript 和 Composition API (<script setup lang="ts" />) 定义类型安全属性，例如：

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

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

However, it is usually more straightforward to define props with pure types via a generic type argument:

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

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

见Docs. If you want to set default values too. See here

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

how to get props in vue3 composition api

vuejs3

'InheritAttrs'

什么是'Attributes'？

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

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

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

how to get props in vue3 composition api

vuejs3

'InheritAttrs'

什么是'Attributes'？

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

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

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

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