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 组件之间的通信其实还是蛮讲究的