2.Vue子元件給父元件通訊

PursuitFreeDom發表於2018-03-20
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
到這裡就完成了子元件給父元件傳遞資料的過程

相關文章