子组件向父组件传值

子组件向父组件传值

子组件向父组件传值其实用的是$emit来触发父组件方法，父组件用v-on来绑定子组件触发的方法

<template>
  <!--子组件-->
  <div>
    <div>子组件变化之后值传给父组件</div>
    <span>子组件值：</span><button @click="addChildTotal">{{num}}</button>
  </div>
</template>
<script>
  export default {
    name: 'ChildComponent',
    data () {
      return {
        num: 0
      }
    },
    methods: {
      addChildTotal () {
        this.$emit('increment')
        this.num ++
      }
    }
  }
</script>
<style>

</style>

<template>
  <!--父组件-->
  <div>
    <span>父组件值：</span><button>{{ total }}</button>
    <ChildComponent v-on:increment="addFatherTotal"></ChildComponent>
  </div>
</template>
<script>
  import ChildComponent from '../taskOne/index'
  export default {
    name: 'fatherComponent',
    components: {
      'ChildComponent': ChildComponent
    },
    data () {
      return {
        total: 0
      }
    },
    methods: {
      addFatherTotal () {
        this.total++
      }
    }
  }
</script>
<style>

</style>

标签：向父,num,组件,ChildComponent,total,传值
来源： https://blog.csdn.net/qq_41497443/article/details/119424747