vue父组件向子组件传值失败

Question

在父组件中有变量 translatedText: "1",在api中拿到值后赋给this.translatedText,控制台显示this.translatedText的值已经改变，但自子组件中translatedText的值仍是‘1’

父7组件App.vue

<template>
  <div id="app">
    <h2>简单翻译</h2><span>简单/易用/便捷</span>
    <TranslateForm v-on:formSubmit="textTranslate"></TranslateForm>
    <TranslateText :translatedText ="translatedText"></TranslateText>
  </div>
</template>

<script>
import TranslateForm from './components/TranslateForm.vue'
import TranslateText from './components/TranslateText.vue'
import md5 from 'blueimp-md5'
import $ from 'jquery'

export default {
  name: 'App',
  data: function () {
    return {
      appKey: '47bb6e424790df89',
      key: 'NH2VxBadIlKlT2b2qjxaSu221dSC78Ew',
      salt: (new Date()).getTime(),
      from: '',
      to: 'en',
      translatedText: '1'
    }
  },
  components: {
    TranslateForm, TranslateText
  },
  methods: {
    textTranslate: function (text) {
      $.ajax({
        url: 'http://openapi.youdao.com/api',
        type: 'post',
        dataType: 'jsonp',
        data: {
          q: text,
          appKey: this.appKey,
          salt: this.salt,
          from: this.from,
          to: this.to,
          sign: md5(this.appKey + text + this.salt + this.key)
        },
        success: function (data) {
          this.translatedText = data.translation[0]
          console.log(this.translatedText)
        }
      })
    }
  }
}
</script>

<style>
</style>

子组件 TranslatedText.vue

<template>
  <div id="TranslateText">
    <h2>内容</h2>
    <p>{{translatedText}}</p>
  </div>
</template>

<script>
export default {
  name: 'TranslateText',
  props: [
    'translatedText'
  ]
}
</script>

<style></style>

输出结果

Answer 1

有个建议就是有点强行组件化的问题 开始做Vue时我也喜欢拆很多组件出来 但记住组件是为了复用（常见如公共菜单按钮栏等） 如非能够复用的情况其实并不用真的拆出组件来 不利用Vuex 组件之间的通信其实还是蛮讲究的