子組件傳值給父組件

子組件傳值給父組件

1、 子組件

<template>
  <div>
    子組件:
    <span>{{childValue}}</span>
    <!-- 定義一個子組件傳值的方法 -->
    <input type="button" value="點擊觸發" @click="childClick">
  </div>
</template>
<script>
  export default {
    data () {
      return {
        childValue: '我是子組件的數據'
      }
    },
    methods: {
      childClick () {
        // childByValue是在父組件on監聽的方法
        // 第二個參數this.childValue是需要傳的值
        this.$emit('childByValue', this.childValue)
      }
    }
  }
</script>

 2、父組件

 父組件:
<template>
  <div>
    <span>{{name}}</span>
    <br>
    <br>
    <!-- 引入子組件 定義一個on的方法監聽子組件的狀態-->
    <child v-on:childByValue="childByValue"></child>
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    },
    methods: {
      childByValue: function (childValue) {
        // childValue就是子組件傳過來的值
        this.name = childValue
      }
    }
  }
</script>