使用this.$emit()方法解决vue中父子组件使用prop传值时，单向数据绑定，父类无法获取子类修改父类后的数据

父组件:

<template>
  <div>
    <blog-editor :content.sync="content"></blog-editor>
  </div>
</template>
<script>
  import blogEditor from './blog-editor'
  import '../assets/css/blog-editor.css'
  export default {
    name: "activity",
    components: {
      blogEditor,
    },
    data() {
      return {
        content: '1324654798',
      }
    },
    methods: {
      getData() {
        console.log(this.content)
      }
    }
  }
</script>
子组件:

<template>
  <div>
    <quill-editor :content="contentData"
                  :options="editorOption"
                  @change="onEditorChange($event)">
    </quill-editor>
  </div>

</template>

<script>
  export default {
    name: "blog-editor",
    components: {
      quillEditor
    },
    props: ["content"],
    data(){
      return{
        editorOption:quillConfig
      }
    },
    methods: {
      onEditorChange({quill, html, text}) {
        this.contentData=html;
      }，
    },
    computed: {
      editor() {
        return this.$refs.myQuillEditor.quill
      },
      contentData: function () {
         let dataValue=this.content;
         this.$emit("update:content", dataValue); //使用计算属性和this.$emit()方法实时更新父组件传递过来的参数，方便父组件获取值
        return dataValue;
        }
    }
  }
</script>

1.关键点

父组件prop数据时需要加上 :content.sync="content"  .sync 

子组件中使用计算属性和this.$emit("update:content", dataValue)方法实时获取子类修改父类的值

this.$emit(）函数主要起通知更新数据的作用