Vue3 script setup中如何正确导入TipTap的nodeViewProps对象

场景说明 #

使用富文本编辑器TipTap时，常规Vue组件（非<script setup>语法）中引入节点视图props的写法如下：

<script>
import { nodeViewProps } from '@tiptap/vue-3'

export default {
  props: nodeViewProps
}
</script>

打印nodeViewProps可以看到它本身是完整的Vue props配置对象，结构如下：

{
  0: false,
  1: true,
  decorations: {required: true, type: Function},
  deleteNode: {required: true, type: Function},
  editor: {required: true, type: Function},
  extension: {required: true, type: Function},
  getPos: {required: true, type: Function},
  node: {required: true, type: Function},
  selected: {required: true, type: Function},
  updateAttributes: {required: true, type: Function},
  [[Prototype]]: Object
}

如果在<script setup>中使用数组包裹、嵌套声明的方式传入配置，会出现访问props.nodeViewProps返回undefined的问题，无法正常获取传入属性。

正确实现 #

nodeViewProps本身就是符合Vue props校验规范的配置对象，直接将其作为参数传入defineProps即可，不需要额外包裹、也不需要单独声明名为nodeViewProps的属性：

<script setup>
import { nodeViewProps } from '@tiptap/vue-3'

const props = defineProps(nodeViewProps)
</script>

声明完成后可以直接通过props访问对应字段，比如props.node、props.editor、props.getPos、props.updateAttributes等，和非<script setup>语法下的访问逻辑完全一致。

错误写法原因说明 #

之前尝试的几种写法都不符合Vue props声明规则：

• 将nodeViewProps放入数组传入defineProps：数组形式的props声明要求元素为字符串类型的prop名称，传入对象会被判定为无效配置
• 传入['nodeViewProps']：相当于手动声明了一个名为nodeViewProps的prop，但TipTap渲染节点视图时不会传递这个名称的属性，自然无法获取值
• 传入{ nodeViewProps: nodeViewProps }：同样是错误声明了名为nodeViewProps的prop，和TipTap实际传入的属性字段不匹配
• 传入{ node: nodeViewProps }：相当于给node这个prop配置了整套nodeViewProps的校验规则，和实际传参结构完全不符

内容的提问来源于stack exchange，提问作者Artur Müller Romanov