vue 父子组件利用计算属性传递信息 -

内容参考
vue官网-组件基础
https://cn.vuejs.org/v2/guide/components.html

以下只是我一些不成熟的理解，建议大概扫一眼官网文档再阅读

父组件传递给子组件

子组件定义自定义参数(Prop)，父组件传参。
当子组件增加一个prop属性那么对应的函数名就是你自定义的参数

子组件

<template>
  <v-md-editor/>
</template>

<script>
export default {
  props: {
# 自定义String类型参数text，父组件就可以使用`v-bind:text` 传值
    text: String
  }
</script>

如上代码,在父组件引用子组件的时候,加上:text="xxx",就已经把xxx以参数形式传递给子组件了(如下)

父组件

<markdown :text="xxx" />
// :text 与 v-bind:text 同等含义
<script>
# 注册子组件
import Markdown from '@/components/Markdown'
export default {
  components: { Markdown }
}
</script>

子组件传递给父组件

子组件使用内建方法$emit。
子组件通过调用内建$emit方法并传入事件名称来触发一个事件，达到子组件传递给父组件的目的

子组件

<script>
export default {
# 自定义指令'getChildrenText' 并将子组件的data函数中的childrenText属性，通过参数传递给父组件
  mounted() {
    this.$emit('getChildrenText', this.childrenText)
  }
}
</script>

父组件

<markdown @getChildrenText="getChildrenText" />
<script>
export default {
 methods: {
# 也就是使用自定义指令的地方'@getText'会接收到子组件的childrenText
    getChildrenText(val) { # val为上个代码块的参数'this.childrenText'
      this.fatherText = val # 让父组件的值等于子组件传递过来的值
    }
}
</script>