vue 父子組件雙向綁定

vue組件有2大特性：

1.全局組件和局部組件

2.父子組件的數據傳遞

接下來直接用demo直接看如何傳值（靜態傳值）

father.vue

<template>
   <div>
        <Counter num="10"></Counter>//靜態傳值
   </div>
</template>
<script>
import Counter from './child.vue' //引入子組件
export default {
  components:{Counter}, //命名子組件
  data(){
  }
}
</script>

child.vue

<template>
    <div>
        <button>+</button>
        <p><span>{{num}}</span></p>
    </div>
</template>
<script>
export default {
    props:['num'], //props接收父組件傳來的值。num必須和父組件的命名一樣
    methods:{
    
    }
}
</script>

動態傳值

father.vue

<template>
   <div>
       //動態改變num值需要用v-bind,子組件通$emit變量獲取父組件的方法，接收事件名
        <Counter v-bind:num="num" v-on:incre="increment" v-on:decre="decrement"></Counter>
   </div>
</template>
<script>
import Counter from './child.vue'
export default {
  components:{Counter},
  data(){
      return{
          num:10,
      }
  },
  methods:{
      increment(){
          this.num++;
      },
      decrement(){
          this.num--;
      }
  }
}
</script>

child.vue

<template>
    <div>
        <button @click="increment">+</button>
         <button @click="decrement">-</button>
        <p><span>{{num}}</span></p>
    </div>
</template>
<script>
export default {
    data(){
        return{}
    },
    props:['num'],
    methods:{
        increment(){
            this.$emit('incre'); //獲取父組件的方法，動態獲取父組件的num值
        },
        decrement(){
            this.$emit('decre');
        }
    }
}
</script>