如何将 ref 作为道具传递：[Vue 警告]：无效的道具：道具“containerRef”的类型检查失败。预期对象，得到 HTMLDivElement？

Posted 2023-02-23

【中文标题】如何将 ref 作为道具传递：[Vue 警告]：无效的道具：道具“containerRef”的类型检查失败。预期对象，得到 HTMLDivElement？

【英文标题】：How to pass ref as prop: [Vue warn]: Invalid prop: type check failed for prop "containerRef". Expected Object, got HTMLDivElement?

【发布时间】：2020-06-28 00:55:42

【问题描述】：

我在父组件中有这个模板：

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

我在“editor-content”组件中有这个道具声明：

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

,

但我收到此警告：

[Vue 警告]：无效的道具：道具“containerRef”的类型检查失败。 预期对象，得到 htmlDivElement

作为 prop 传递的 ref 的类型应该是什么？

【参考方案1】：

要仅允许 <div> 元素，请使用类型 HTMLDivElement。

要允许任何元素，请使用类型HTMLElement。

要允许任何内容，请将 type 设置为 null 或 undefined（这样 linter 不会发出警告）。

【讨论】：

即使 vue docs vuejs.org/v2/guide/components-props.html#Prop-Types 中没有“HTMLElement”类型？

是的，你可以在那个链接中看到or any other constructor。

type HTMLElement 未定义 - 如果您没有定义自定义构造函数

【参考方案2】：

这是一个使用 TypeScript 和 Nuxt 以及 s-s-r 的完整示例。 通过 cmets 添加了更多上下文。

<script lang="ts">
import  defineComponent, PropType, toRef, watchPostEffect  from '@nuxtjs/composition-api'

export default defineComponent(
  props: 
    element: 
      // When using Nuxt s-s-r, 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>