Vue父子组件之间通信

1.子组件代码

<template>
  <Editor id="tinymce" :init="editorInit" v-model="message"/>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'
export default {
  name: 'Tinymce',
  components: { Editor },
  props: {
    message: {
      type: String,
      default: ''
    }
  },
  data() {
    return this.initFields()
  },
  mounted() {
    tinymce.init({})
  },
  methods: {
    initFields() {
      const fields = {
        editorInit: { language_url: '/static/tinymce/zh_CN.js', language: 'zh_CN', skin_url: '/static/tinymce/skins/lightgray', height: 300 }
      }
      return fields
    }
  }
}
</script>

2.父组件代码：

<template>
    <Editor id="tinymce" ref="childConponent" message="notice.content" />
</template>
<script>
import Editor from '@/components/Tinymce/index'
export default {
  directives: {
    waves
  },
  components: { Editor }
  }
}
</script>

3.解析：

父组件通过属性传值

该属性与子组件的

props: {
    message: {
      type: String,
      default: ''
    }
  }

相对应

props 中定义的属性，与data()中定义的属性用法一样