![](/img/trans.png)
[英][Vue warn]: Invalid prop: type check failed for prop “productCartData”. Expected Object, got String with value “[object Object]”
[英]How to pass ref as prop: [Vue warn]: Invalid prop: type check failed for prop "containerRef". Expected Object, got HTMLDivElement?
我在父组件中有这个模板:
<template>
<div>
<div
contenteditable
ref="editorContainer"
><editor-content :container-ref="$refs.editorContainer" /></div>
</div>
</template>
我在“editor-content”组件中有这个道具声明:
props: {
//...
containerRef: {
type: Object,
}
},
但我收到此警告:
[Vue 警告]:无效的道具:道具“containerRef”的类型检查失败。 预期对象,得到 HTMLDivElement
作为道具传递的 ref 的类型应该是什么?
要仅允许<div>
元素,请使用类型HTMLDivElement
。
要允许任何元素,请使用类型HTMLElement
。
要允许任何内容,请将 type 设置为null
或undefined
(这样 linter 就不会发出警告)。
这是带有 SSR 的 TypeScript 和 Nuxt 的完整示例。
通过评论添加了更多上下文。
<script lang="ts">
import { defineComponent, PropType, toRef, watchPostEffect } from '@nuxtjs/composition-api'
export default defineComponent({
props: {
element: {
// When using Nuxt SSR, use this otherwise you get error
// This allows any HTMLElement type, if want HTMLDivElement just change it
type: (process.server ? Object : HTMLElement) as PropType<HTMLElement>,
// let's make it explicit that it does not exist from the begining
default: undefined,
},
},
setup(props) {
// Because it can be undefined, let's use `toRef` instead of `toRefs`
const element = toRef(props, 'element')
// Optional Effect example
watchPostEffect((onInvalidate) => {
// This never happens, on post effect all refs are resolved
if (!element.value) return
// Your event listener
const onScroll = (e: Event) => console.log(e)
// Add event listener
element.value.addEventListener('scroll', onScroll, { passive: true })
// Remove event listener
onInvalidate(() => element.value.removeEventListener('scroll', onScroll))
})
},
})
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.