Vue中的父子组件通讯

一、在main.js中定义一个$Bus

// 父子组件传参
const $Bus = new Vue()
Vue.prototype.$Bus = $Bus

二、父组件中引入富文本组件

<el-form-item label="正文">
	<testquill ref="myTextEditor" :content="dialogModel.newsValue" /> 
</el-form-item>

三、富文本组件中定义v-model和props

<quill-editor
    ref="myTextEditor"
    v-model="content"
   :options="editorOption"
/>

 props: ['content'],

四、在父组件中定义content并声明handleReceive函数，接收富文本传回的值

content: '', // 编辑器传回来的内容

// 接受富文本穿回来的值
 handleReceive(val) {
   console.log(val)
   this.content = val
}

五、在富文本组件中声明getData函数接收父组件传过来的值

watch: {
    content(newval, oldval) {
      this.content = newval
    }
  },
getData() {
      console.log(this.content)
      this.$Bus.$emit('handleReceive', this.content)
    }

六、在父组件提交函数通知富文本组件接收最新数据，并用content替换原本的值

  async submitTemp(formData) {
    // 通知富文本组件获取最新数据
      this.$Bus.$emit('getData')

七、在父组件和子组件的mounted中调用handleReceive和getData

//父组件的
mounted() {
    var that = this
    this.findList()
    this.$Bus.$on('handleReceive', this.handleReceive)
  },
//子组件的
mounted() {
	this.initButton();
	this.$Bus.$on('getData', this.getData)
},