there are two components TranslateForm.vue and TranslateText.vue when TranslateForm.vue is successfully rendered when mounted in the root component, TranslateText.vue only renders a
< / div > tag, and the console does not report an error 
TranslateForm.vue
<template>
<div>
<!---->
<form v-on:submit.prevent="formSubmit">
<input type="text" v-model="text" placeholder=""/>
<select>
<option value ="en">English</option>
</select>
<input type="submit" value=""/>
</form>
</div>
</template>
<script>
export default {
name: "TranslateForm",
data: function () {
return {
text: ""
}
},
methods: {
formSubmit: function () {
this.$emit("formSubmit", this.text)
}
}
}
</script>
<style></style>
TranslateText.vue
<template>
<div>
111
<h2>{{translatedText}}</h2>
</div>
</template>
<script>
export default {
name: "TranslateText",
props: [
"translatedText"
]
}
</script>
<style></style>APP.vue
<template>
<div id="app">
<h2></h2><span>//</span>
<TranslateForm v-on:formSubmit="textTranslate"></TranslateForm>
<TranslateText v-text="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: ""
}
},
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) {
console.log(data.translation[0])
this.translatedText = data.translation[0]
}
})
}
}
}
</script>
<style>
-sharpapp {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: -sharp2c3e50;
margin-top: 60px;
}
</style>
Mar.10,2021
