如何在Vue 3脚本设置中从nodeViewProps中导入TipTap对象？
如何在Vue 3脚本设置中从nodeViewProps中导入TipTap对象？
提问于 2022-06-06 01:37:24
我使用的是TipTap，一种Rich Text Editor，它们在vue组件中处理道具的方式(composition )是通过导入它们，如下所示：
<script>
import { nodeViewProps } from '@tiptap/vue-3'
export default {
props: nodeViewProps
}
</script>日志nodeViewProps显示一个object of objects
{0: false, 1: true, editor: {…}, node: {…}, decorations: {…}, selected: {…}, extension: {…}, …}
0: false
1: true
decorations: {required: true, type: ƒ}
deleteNode: {required: true, type: ƒ}
editor: {required: true, type: ƒ}
extension: {required: true, type: ƒ}
getPos: {required: true, type: ƒ}
node: {required: true, type: ƒ}
selected: {required: true, type: ƒ}
updateAttributes: {required: true, type: ƒ}
[[Prototype]]: Object如何将这个prop object导入到script setup中？我试过：
<script setup>
import {nodeViewProps} from '@tiptap/vue-3'
const props = defineProps([
nodeViewProps
])
const props = defineProps([
'nodeViewProps'
])
const props = defineProps({
nodeViewProps: nodeViewProps
})
const props = defineProps({
node: nodeViewProps
})
</script>所有这些似乎都不是正确的方法。
console.log(props.nodeViewProps)输出undefined。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-06-06 02:07:45
这就是它在script setup中的工作方式。显然，您不再需要导入nodeViewProps了，相反，默认情况下会将一个node道具对象传递给您的vue component，可以像这样访问vue component：
<script setup>
import {NodeViewWrapper} from '@tiptap/vue-3'
const props = defineProps({
node: {
type: Object,
required: true
},
updateAttributes: {
type: Function,
required: true,
}
})
const increase = () => {
props.updateAttributes({
count: props.node.attrs.count + 1,
})
}
</script>如果从它们的文档及其原始形式来看，这个组件如下所示：
<template>
<node-view-wrapper class="vue-component">
<span class="label">Vue Component</span>
<div class="content">
<button @click="increase">
This button has been clicked {{ node.attrs.count }} times.
</button>
</div>
</node-view-wrapper>
</template>
<script>
import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
export default {
components: {
NodeViewWrapper,
},
props: nodeViewProps,
methods: {
increase() {
this.updateAttributes({
count: this.node.attrs.count + 1,
})
},
},
}
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72512237
复制相关文章
相似问题
腾讯云开发者
