2-6 单向数据流

vue在子组件中不允许直接修改从父组件传递过来的参数。

一、父组件

<template>
  <div>
   {{count}}
   <count :data="count" @add="handleAdd"></count>
  </div>
</template>
<script>
import Count from '@/components/Count'
export default {
  name: "Home",
  data() {
    return {
      count:10
    };
  },
  components:{
    Count
  },
  methods:{
    handleAdd(){
      this.count++;
    }
  }
};
</script>

二、子组件

<template>
  <div @click="add">{{data}}</div>
</template>
<script>
export default {
    props:{
        data:{
            type:Number,
            required:false
        }
    },
    methods:{
        add(){
            this.$emit("add")
        }
    }
};
</script>