Estoy usando TipTap , un Rich Text Editor y la forma en que manejan los accesorios en los componentes vue (api de composición) es importándolos así:
<script> import { nodeViewProps } from '@tiptap/vue-3' export default { props: nodeViewProps } </script> el registro nodeViewProps muestra un 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 ¿Cómo importaría este prop object dentro de script setup ? He intentado:
<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>ninguno de los cuales parece ser la forma correcta.
console.log(props.nodeViewProps) Salidas undefined .
Así es como funciona en script setup . Aparentemente, ya no necesita importar nodeViewProps y, en su lugar, se pasa un objeto prop de node de forma predeterminada a su vue component al que se puede acceder de la siguiente manera:
<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>Este componente si de su documentación y su forma original se ve así:
<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>