脚本宝典收集整理的这篇文章主要介绍了2.Vue子组件给父组件通信，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

子组件给父组件通信

如果子组件想要改变数据呢？这在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
到这里就完成了子组件给父组件传递数据的过程

脚本宝典总结

以上是脚本宝典为你收集整理的2.Vue子组件给父组件通信全部内容，希望文章能够帮你解决2.Vue子组件给父组件通信所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。