5.单向/双向数据流

一.单向数据流

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

//1.新建子组件
<template>
    <div @click="handleAdd">{{data}}</div>
</template>
<script>
    export default {
       methods:{
            handleAdd(){
              //通过$emit传数据,$emit()有两个参数，第一个是传递的事件，第二个是要传递的数据
                this.$emit("add")   
            }
        },
        props:{
            data:{          //接收父组件传递过来的数据
                type:Number,
                required:true
            }
        },
    }
</script>

//2.父组件
<template>
  <div class="home">
    <h4>{{count}}</h4>
    <count :data="count" @add="handleAdd"/>  
  </div>
</template>
/* @add=handleAdd:自定义事件 */
<script>
import Count from '@/components/Count.vue'
export default {
  name: 'home',
  data(){
    return{
      count:10
    }
  },
  components:{
    Count
  },
  methods:{
    handleAdd(){
      this.count++
    }
  }
}
</script>

二.双向数据流

点击下面的12之后数据全部更改为12

//1.新建一个子组件
<template>
    <div @click="add">
        {{data}}
    </div>
</template>
<script>
    export default {
        name:"Test",
        props:{
            data:{
                type:Number,
                required:true
            }
        },
        methods:{
            add(){
                this.$emit("update:data",12)    //数据更新
            }
        }
    }
</script>
<style lang="scss" scoped>
</style>

//2.在父组件中引入子组件
<template>
  <div class="home">
    <h4>{{count}}</h4>
    <test :data.sync="count"></test> 
  </div>
</template>
<script>
import Test from '@/components/Test.vue'
export default {
  name: 'home',
  data(){
    return{
      count:10
    }
  },
  components:{
    Test
  },
}
</script>