APP.vue
<template> <div> <h4>在线翻译</h4> <h5>简单/易用/方便</h5> <!-- 表单组件 --> <translateForm @formSubmit='translateText'></translateForm> <!-- 显示组件 --> <translateOutput v-text='translatedText'></translateOutput> </div> </template> <script> import TranslateForm from './components/translateForm' import translateOutput from './components/translateOutput' export default { name: 'App', components:{ TranslateForm,translateOutput }, data(){ return{ //翻译出的文字 translatedText:'' } }, methods:{ //点击翻译事件 translateText(text,language){ // alert(text) this.$http.get('https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20170721T082515Z.54cf3dc583f679db.f4a96182281281d8b5dfe24b4e88298e2133f219&lang=' +language+'&text='+text) .then((response)=>{ console.log(response.body.text[0]) //翻译结果 this.translatedText = response.body.text[0]; //将翻译结果赋给文本框，传给子组件 }) } } } </script> <style> </style>
表单组件 translateForm.vue
<template> <!-- 表单组件 --> <div> <form @submit="formSubmit" > <input type="text" placeholder='输入需要翻译的内容' v-model="textTotranslate"> <select v-model="language"> <option value="en">English</option> <option value="ru">Russian</option> <option value="ko">Korean</option> </select> <input type="submit" value="翻译"> </form> </div> </template> <script> export default { name: 'translateForm', data () { return { //用户输入的内容 textTotranslate:"", //用户选择的语言 language:"" } }, methods:{ //点击翻译传给父元素 formSubmit(e){ this.$emit("formSubmit",this.textTotranslate,this.language) e.preventDefault(); } } } </script> <style scoped> </style>
显示组件 translateOutput.vue
<template> <!-- 显示组件 --> <div> {{translatedText}} </div> </template> <script> export default { name: 'translateOutput', props:[ 'translatedText' ], data () { return { } } } </script> <style scoped> </style>