首先得新建一个bus.js,内容如下
import Vue from 'vue'
export default new Vue;
子组件大致代码
<template>
<div>
<div ref="editor" style="text-align:left" ></div>
</div>
</template>
<script>
import E from 'wangeditor'
import bus from './bus.js'
export default {
name: 'editor',
data () {
return {
editorContent: ''
}
},
watch: {
editorContent(old, v) {
if (v !== old) {
bus.$emit("texts", this.editorContent);
}
}
},
mounted() {
var editor = new E(this.$refs.editor)
editor.customConfig.onchange = (html) => {
this.editorContent = html
}
editor.create();
}
}
</script>
父组件大致代码
<script>
import wangE from '../E.vue'
import bus from '../bus.js'
export default {
data() {
return {
ruleForm: {
name: '',
desc: '',
desc2: ''
}
}
},
components:{
wangE
},
mounted(){
// const _this = this
bus.$on('texts',(v)=>{
this.ruleForm.desc2 = v
})
},
methods: {
submitForm(formName) {
this.$refs.wange.getC()
this.$refs[formName].validate((valid) => {
if (valid) {
console.log(this.ruleForm)
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
html就没有写了
大概能看懂,小白直接复制