---
title: "使用 Vue 标记视图"
description: "使用 Vue 在 Tiptap 中构建自定义标记视图。"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/custom-extensions/mark-views/vue"
---

# 使用 Vue 标记视图

使用 Vue 在 Tiptap 中构建自定义标记视图。

如果你习惯于使用 Vue，则使用 Vanilla JavaScript 可能会感觉复杂。好消息是：你也可以在标记视图中使用常规的 Vue 组件。你只需要知道一点小知识，但我们来逐步了解。

## 渲染 Vue 组件

要在编辑器内渲染 Vue 组件，你需要执行以下操作：

1. [创建一个标记扩展](https://tiptap.zhcndoc.com/editor/extensions/custom-extensions/create-new/mark.md)
2. 创建一个 Vue 组件
3. 将该组件传递给提供的 `VueNodeViewRenderer`
4. 使用 `addMarkView()` 注册它
5. [配置 Tiptap 使用你的新标记扩展](https://tiptap.zhcndoc.com/editor/getting-started/configure.md)

下面是你的节点扩展的示例：

```ts
import { Mark } from '@tiptap/core'
import { VueMarkViewRenderer } from '@tiptap/vue-3'

import Component from './Component.jsx'

export default Mark.create({
  // 选项…

  addMarkView() {
    return VueMarkViewRenderer(Component)
  },
})
```

以下是 Vue 组件的示例：

```vue
<template>
  <span className="content" data-test-id="mark-view">
    <mark-view-content />
    <label contenteditable="false"
      >Vue 组件::
      <button @click="increase" class="primary">
        此按钮已被点击 {{ count }} 次。
      </button>
    </label>
  </span>
</template>

<script>
import { MarkViewContent, markViewProps } from '@tiptap/vue-3'
export default {
  components: {
    MarkViewContent,
  },
  data() {
    return {
      count: 0,
    }
  },
  props: markViewProps,
  methods: {
    increase() {
      this.count += 1
    },
  },
}
</script>
```

明白了吗？让我们看看它是如何运作的。欢迎随意复制以下示例以开始使用。

> **Interactive demo:** [VueComponent](https://embed.tiptap.dev/preview/GuideMarkViews/VueComponent?inline=false\&hideSource=false)

## 更新标记视图属性

更新标记视图的属性非常简单。您可以使用组件属性提供的 `updateAttributes` 方法。

```vue
<template>
  <span :id="HTMLAttributes.id" className="content">
    <mark-view-content />
  </span>
</template>

<script>
import { MarkViewContent, markViewProps } from '@tiptap/vue-3'
export default {
  components: {
    MarkViewContent,
  },
  props: markViewProps,
  methods: {
    increase() {
      this.count += 1
    },
    updateId() {
      this.updateAttributes({ id: Date.now() })
    }
  },
}
</script>
```