实现文字修改功能的基本思路

在Vue中实现文字修改功能通常涉及数据绑定、事件处理和状态管理。通过双向绑定（v-model）或单向绑定（v-bind）结合方法调用，可以动态更新文本内容。

使用双向绑定（v-model）

通过v-model实现输入框与数据的双向绑定，修改输入框内容时自动更新数据：

<template>
  <div>
    <input v-model="text" placeholder="编辑文字" />
    <p>当前内容：{{ text }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "初始文字"
    };
  }
};
</script>

单向绑定与事件触发

通过v-bind绑定数据，结合@input或@change事件手动更新数据：

<template>
  <div>
    <input 
      :value="text" 
      @input="updateText($event.target.value)" 
      placeholder="编辑文字" 
    />
    <p>当前内容：{{ text }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "初始文字"
    };
  },
  methods: {
    updateText(newText) {
      this.text = newText;
    }
  }
};
</script>

支持富文本编辑

若需支持富文本（如加粗、斜体），可使用contenteditable属性结合Vue指令：

<template>
  <div>
    <div 
      contenteditable 
      @input="updateText($event.target.innerHTML)"
      v-html="text"
    ></div>
    <p>渲染结果：<span v-html="text"></span></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "<strong>加粗文字</strong>"
    };
  },
  methods: {
    updateText(html) {
      this.text = html;
    }
  }
};
</script>

结合第三方库

对于复杂场景（如Markdown编辑器），可集成第三方库如vue-quill-editor：

1. 安装依赖：

   npm install vue-quill-editor quill

2. 组件实现：

   
   <template>
   <div>
    <quill-editor v-model="content" />
    <div v-html="compiledContent"></div>
   </div>
   </template>

import { quillEditor } from 'vue-quill-editor';

export default { components: { quillEditor }, data() { return { content: "

标题

" }; }, computed: { compiledContent() { return this.content; // 实际项目中可能需调用Markdown解析器 } } }; ```

状态管理（Vuex）

全局共享文本数据时，可通过Vuex管理状态：

// store.js
export default new Vuex.Store({
  state: {
    globalText: "全局文字"
  },
  mutations: {
    setText(state, payload) {
      state.globalText = payload;
    }
  }
});

组件中调用：

<template>
  <div>
    <input 
      :value="$store.state.globalText" 
      @input="$store.commit('setText', $event.target.value)" 
    />
  </div>
</template>

性能优化

频繁更新文本时，可通过debounce减少触发频率：

import { debounce } from 'lodash';

methods: {
  updateText: debounce(function(newText) {
    this.text = newText;
  }, 300)
}

以上方法覆盖了从基础到进阶的文字修改实现，可根据实际需求选择合适方案。