在父組件中有變量 translatedText: "1",在api中拿到值后賦給this.translatedText,控制臺顯示this.translatedText的值已經(jīng)改變，但自子組件中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>內(nèi)容</h2> ????<p>{{translatedText}}</p> ??</div> </template> <script> export?default?{ ??name:?'TranslateText', ??props:?[ ????'translatedText' ??] } </script> <style></style>輸出結(jié)果