VUE 父子组件之间通信传值 props和 $emit

最新推荐文章于 2024-09-26 01:42:12 发布

weixin_33737774

最新推荐文章于 2024-09-26 01:42:12 发布

阅读量114

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xxflz/p/10231445.html

版权

1、父组件传值给子组件props

父组件得到的值translateText

 data(){
    return{
      translateText:''  
    }
  },

 //props接收父组件传过来的translateText值
  props:[
      "translateText"
  ]

2、子组件传值给父组件 $emit

  data(){
      return{
          inputValue:'',
          lang:''
      }
  },
 methods:{
      formsubmit:function(e){
    //   alert(this.inputValue);
          this.$emit('formSubmit',this.inputValue,this.lang) //this.$emit()事件注册方法，传递一个事件formSubmit和参数this.inputVlue到根组件APP.vue
        // this.$http.get('https://translate.yandex.net/api/v1.5/tr/translate?key=trnsl.1.1.20180726T032631Z.8496e1f4734b42fa.4c4e2d1b85ec5607963552f855d8ce1238676aa7&lang=en&text='+this.inputValue)
        // .then((response)=>{
        //     console.log(response.body);
        //     this.translateText=response.body
        // })
        e.preventDefault() //阻止事件冒泡，防止刷新页面
      }
  }