单向数据流

//Tips:在vue中,子组件不要直接修改从父组件传递过来的数据
<template>
  <div @click="handleAdd">{{data}}</div>
</template>
<script>
export default {
    props:{
        data:{
            type:Number,
            required:true
        }
    },
    methods:{
        handleAdd(){
           this.$emit("add")
        }
    }
};
<template>
  <div class="home">
     <h4>{{count}}</h4>
     <count :data="count" @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>