子组件给父组件通讯

如果子组件想要转变数据呢？这在vue中是不允许的，由于vue只允许单向数据通报，这时候我们能够经由历程触发事宜来关照父组件转变数据，从而到达转变子组件数据的目标

子组件：

<template>
  <div @click='upData'></div>  
</template>

<script type="text/javascript">
  export default {
    data () {
      return {
          msg: 'Hello'
      }
    }    
    methods: {
      upData () {
          this.$emit('childData', this.msg) //this.msg通报的数据
      }
    }
  }
</script>

<style type="text/css">
</style>

经由历程绑定事宜upData,在里面运用$emit事宜来注册childData事宜,而且通报数值this.msg到父组件中
父组件：

<template>
  <child @upData='changData' :msg='msg'></child>  //监听子组件触发的事宜,然后挪用change要领
</template>

<script type="text/javascript">
  export default {
    data () {
      return {
        msg: ''
      }
    }    
    methods: {
      changData (msg) {
          this.msg = msg
      }
    }
  }
</script>

<style type="text/css">
</style>

父组件经由历程监听子组件的childData的事宜,来触发本身的绑定的changData事宜,并将值猎取复制给本身的msg
到这里就完成了子组件给父组件通报数据的历程