如何将ref作为prop传递:【Vue警告】:无效 prop :prop“containerRef”的类型检查失败,应为Object,是否获得HTMLDivElement?

r7xajy2e  于 2023-05-01  发布在  Vue.js
关注(0)|答案(3)|浏览(176)

我在父组件中有此模板:

<template>
    <div>
        <div 
            contenteditable
            ref="editorContainer"
        ><editor-content :container-ref="$refs.editorContainer" /></div>
    </div>
</template>

我在“editor-content”组件中有这样的props声明:

props: {
    //...
    containerRef: {
        type: Object,
    }

},

但我得到了警告
[Vue warn]:无效属性:prop“containerRef”的类型检查失败。应为Object,已获取HTMLDivElement
作为 prop 传递的ref类型应该是什么?

vmdwslir

vmdwslir1#

要只允许<div>元素,请使用HTMLDivElement类型。
要允许任何元素,请使用类型HTMLElement
要允许任何东西,请将type设置为nullundefined(这样linter就不会发出警告)。

lp0sw83n

lp0sw83n2#

下面是一个完整的示例,使用TypeScript和Nuxt与SSR。
通过评论添加了更多上下文。

<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>
m2xkgtsf

m2xkgtsf3#

这对我来说很有用(Typescript)。

anchorElement: {
  type: (null as unknown) as PropType<HTMLElement | null>,
  required: true,
},

相关问题