2-5单向数据流

Tips:在vue中,子组件不要直接修改从父组件传递过来的数据

<template>
  <div @click="handleAdd">{{data}}</div> //绑定一个点击事件 handleAdd
</template>

<script>
export default {
    props:{
        data:{
            type:Number,
            required:true
        }
    },
    methods:{
        handleAdd(){
           this.$emit("add") //子组件传递一个add方法给父组件
        }
    }
};

<template>
  <div class="home">
     <h4>{{count}}</h4>
     <count :data="count" @add="handleAdd"/> //接收add方法，定义handleAdd事件
     <Test :data.sync="count"/>
  </div>
</template>
<script>
import Count from '@/components/Count.vue'
export default {
  name: 'home',
  data(){
    return {
      count:10
    }
  },
  components:{
    Count
  },
  methods:{
    handleAdd(){
      this.count++;
    }
  }
}
</script>