Как получить реквизиты в API композиции vue3
Я пытаюсь написать компонент контейнера «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.info(props);
}
</script>
как я могу получить некоторые атрибуты реквизита, наследуемые от «Дерева» в функции A?
Ответы 2
«Наследовать атрибуты»
Во-первых, наследовать атрибуты не означает наследование реквизита, inheritAttrs установленное значение true означает, что вы автоматически наследуете атрибуты (не реквизит) и привязываете эти атрибуты к корневому узлу компонента.
Что такое «Атрибуты»?
Некоторыми распространенными являются атрибуты class, style, id, disabled, required и minlength, и это лишь некоторые из них. В основном все нативные HTML-атрибуты адресуются с помощью inheritAttrs.
Как получить доступ к объекту props внутри <script setup>?
В API композиции вам необходимо явно указать определять реквизиты в <script setup>, чтобы иметь возможность использовать объект props.
В компонентах с одним файлом (SFC) с помощью свойства могут быть объявлены с помощью макроса defineProps():
<script setup>
const props = defineProps(['foo'])
console.info(props.foo)
</script>
Подробнее: Что, если у меня есть prop с тем же именем, что и attribute?
Давайте настроим пример. Вы определяете реквизит с именем disabled в MyComponent.vue.
MyComponent.vue
<template>
<Tree v-bind = "$attrs"/>
</template>
<script setup>
const props = defineProps({
disabled: Boolean,
})
console.info(props.disabled); // this works
</script>
... а затем добавьте компонент вот так, передав disabled. Обратите внимание, что :disabled = "true" и просто disabled означают одно и то же в обоих случаях — независимо от того, определены реквизиты или нет.
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.
Вы можете определить безопасные для типов реквизиты с помощью 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>
См. Документы. Если вы хотите также установить значения по умолчанию. См. здесь
Спасибо, теперь я знаю, как это сделать: просто повторно объявил атрибут, который мне нужен, в моем пользовательском компоненте.