对于父子组件之间的互相传值,报错如下:
[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>