vue父子组件问题总结（传值/富文本使用）

鱼小旭

已于 2022-04-24 10:31:38 修改

阅读量1.3k

点赞数

分类专栏： Vue.js学习日志文章标签： vue 富文本

于 2022-03-31 10:58:50 首次发布

本文链接：https://blog.csdn.net/qq_43476358/article/details/123866248

版权

Vue.js学习日志专栏收录该内容

15 篇文章 0 订阅

订阅专栏

vue 父子组件通信

vue 父子组件通信详解

传值问题/富文本wangEditor

文末封装组件代码

在div中使用

   <div class="editor" @input="change"></div>

@input="change"为后面方法使用 "change"是后面的方法名

// v-model 指令是会给此节点添加一个input事件，我们在给富文本编辑器添加一个input事件，这么做在于，
当输入内容后会获取到最新的内容，通过$emit 触发 父组件v-model所添加的input事件并将最新的内容传递过去，
传递过去的值默认就会赋给v-model所绑定的属性。

 //TODO 解决富文本编辑器绑值问题
 change(e) {
   this.$emit("input", e.target.innerHTML);
 },

// 富文本编辑器使用wangeditor   使用命令npm i wangeditor --save安装后使用几行代码得到一个编辑器
<template>
  <div class="home">
    <div class="editor" @input="change"></div>
  </div>
</template>

<script>
// 引入 wangEditor
import wangEditor from "wangeditor";

export default {
  data() {
    return {
      editor: null,
      editorData: "",
    };
  },
  mounted() {
    const editor = new wangEditor(`.editor`);

    // 配置 onchange 回调函数，将数据同步到 vue 中
    editor.config.onchange = (newHtml) => {
      this.editorData = newHtml;
    };

    // 创建编辑器
    editor.create();

    this.editor = editor;
  },
  methods: {
    
    // v-model 指令是会给此节点添加一个input事件，我们在给富文本编辑器添加一个input事件，这么做在于，当输入内容后会获取到最新的内容，通过$emit 触发 父组件v-model所添加的input事件并将最新的内容传递过去，传递过去的值默认就会赋给v-model所绑定的属性。

    //TODO 解决富文本编辑器绑值问题
    change(e) {
      this.$emit("input", e.target.innerHTML);
    },


  },

  beforeDestroy() {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy();
    this.editor = null;
  },
};
</script>

<style>


/* 富文本编辑器与表单对齐BEGIN */

.home {
  width: 90%;
  margin-left: -15px;
  position: relative;
}
.editor{
  margin-left: 15px;
}

/* 富文本编辑器与表单对齐END */


</style>