vue 父组件与子组件通信报错

对于父子组件之间的互相传值，报错如下：

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "content"

 

 

解决办法：

子组件不直接使用父组件传过来的值，而是将传过来的值存到一个变量里，然后使用该变量的值:

如下：这里 props 传过来的 content 直接放到 data 的 msg 中，然后组件使用 this.msg 的数据

<template>
    <div>
        <vue-ueditor-wrap v-model="msg" :config="ueConfig" @beforeInit="initUE" @ready="ready">
        </vue-ueditor-wrap>
    </div>
</template>

<script>
import { getUUID } from '@/utils';

export default {
  name: 'UE',
  data() {
    return {
      editorInstance: null,
      msg: this.content,
      ueConfig: this.config,
      ueKey: this.uuid,
    };
  },
  props: {
    content: {
      type: String,
      default: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定</h2>',
    },
    config: {
      type: Object,
      default: () => ({
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 240,
        // 初始容器宽度
        initialFrameWidth: '100%',
        // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        serverUrl: 'http://localhost/xifan/ue/config',
        // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，
        // 通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
        UEDITOR_HOME_URL: 'ueditor-1.4.3.3/',
      }),
    },
    uuid: {
      type: String,
      default: getUUID(),
    },
  },
  mounted() {
  },
  methods: {
    /**
     * 获取uuid
     */
    getUUID() {
      return this.ueKey;
    },
    /**
     * 获取输入内容
     */
    getContent() {
      return this.msg;
    },
    /**
     * 初始化获取ue实例
     */
    ready(editorInstance) {
      this.editorInstance = editorInstance;
    },
    /**
     * 创建秀米接入按钮
     */
    createXiumiDialog() {
      window.UE.registerUI('dialog', (editor) => {
        const btn = new window.UE.ui.Button({
          name: 'xiumi-connect',
          title: '秀米',
          onclick() {
            const dialog = new window.UE.ui.Dialog({
              iframeUrl: 'ueditor-1.4.3.3/xiumi-ue-dialog-v5.html',
              editor,
              name: 'xiumi-connect',
              title: '秀米图文消息助手',
              cssRules: `z-index:9999; width: ${window.innerWidth - 160}px; height: ${window.innerHeight - 60}px;`,
            });
            dialog.render();
            dialog.open();
          },
        });
        return btn;
      });
    },

    /**
     * 初始化ue
     */
    initUE() {
      this.createXiumiDialog();
      this.initCatchRemoteImageAction();
    },

    /**
     * 初始化抓取远程图片的操作
     */
    initCatchRemoteImageAction() {
      const outer = this;
      window.UE.plugins.catchremoteimage = function a() {
        const me = this;
        const { ajax } = window.UE;

        /* 设置默认值 */
        if (me.options.catchRemoteImageEnable === false) return;
        me.setOpt({
          catchRemoteImageEnable: true,
        });

        me.addListener('afterpaste', () => {
          me.fireEvent('catchRemoteImage');
        });

        me.addListener('catchRemoteImage', () => {
          const catcherLocalDomain = me.getOpt('catcherLocalDomain');
          const catcherActionUrl = me.getActionUrl(me.getOpt('catcherActionName'));
          const catcherUrlPrefix = me.getOpt('catcherUrlPrefix');
          const catcherFieldName = me.getOpt('catcherFieldName');

          const { domUtils } = window.UE.dom;
          const remoteImages = [];
          const imgs = domUtils.getElementsByTagName(me.document, 'img');
          const test = (src, urls) => {
            if (src.indexOf(window.location.host) !== -1 || /(^\.)|(^\/)/.test(src)) {
              return true;
            }
            if (urls) {
              let url = urls[0];
              for (let j = 0; url;) {
                if (src.indexOf(url) !== -1) {
                  return true;
                }
                j += 1;
                url = urls[j];
              }
            }
            return false;
          };
          let ci = imgs[0];
          for (let i = 0; ci;) {
            if (!ci.getAttribute('word_img')) {
              const src = ci.getAttribute('_src') || ci.src || '';
              if (/^(https?|ftp):/i.test(src) && !test(src, catcherLocalDomain)) {
                remoteImages.push(src);
              }
            }
            i += 1;
            ci = imgs[i];
          }

          function catchremoteimage(images, callbacks) {
            const { utils } = window.UE;
            const params = utils.serializeParam(me.queryCommandValue('serverparam')) || '';
            const url = utils.formatUrl(catcherActionUrl + (catcherActionUrl.indexOf('?') === -1 ? '?' : '&') + params);
            utils.isCrossDomainUrl(url);
            const opt = {
              method: 'POST',
              dataType: '',
              timeout: 60000, // 单位：毫秒，回调请求超时设置。目标用户如果网速不是很快的话此处建议设置一个较大的数值
              onsuccess: callbacks.success,
              onerror: callbacks.error,
            };
            opt[catcherFieldName] = images;
            // 将生成的uuid转到后台存储
            opt.uuid = outer.ueKey;
            ajax.request(url, opt);
          }

          // eslint-disable-next-line no-unreachable
          if (remoteImages.length) {
            catchremoteimage(remoteImages, {
              // 成功抓取
              success(r) {
                // eslint-disable-next-line no-eval
                const info = r.state !== undefined ? r : eval(`(${r.responseText})`);

                /* 获取源路径和新路径 */
                let oldSrc; let newSrc; const
                  { list } = info;
                let i = 0;
                ci = imgs[i];
                for (; ci;) {
                  oldSrc = ci.getAttribute('_src') || ci.src || '';
                  let j = 0;
                  let cj = list[j];
                  for (; cj;) {
                    if (oldSrc === cj.source && cj.state === 'SUCCESS') { // 抓取失败时不做替换处理
                      newSrc = catcherUrlPrefix + cj.url;
                      domUtils.setAttributes(ci, {
                        src: newSrc,
                        _src: newSrc,
                      });
                      break;
                    }
                    j += 1;
                    cj = list[j];
                  }
                  i += 1;
                  ci = imgs[i];
                }
                me.fireEvent('catchremotesuccess');
              },
              // 回调失败，本次请求超时
              error() {
                me.fireEvent('catchremoteerror');
              },
            });
          }
        });
      };
    },
  },
};
</script>

<style>
.edui-button.edui-for-xiumi-connect .edui-button-wrap .edui-button-body .edui-icon {
    background-image: url("http://xiumi.us/connect/ue/xiumi-connect-icon.png") !important;
    background-size: contain;
}
</style>