父元件向子元件通訊

原理： 父元件data中存在一屬性，子元件通過props接收，父元件動態繫結該資料。

子元件程式碼：

<template>
<div class="child">
    <button>減一</button>   {{number}}    <button>加一</button>
</div>
</template>
<script>
export default {
prop:['number'] //接收的資料，當存在props時，子元件將不再讀取自己data中的number資料。
    data (){
        return {
            number:12
        }
    }
}
</script>
<style scoped>
.child {
    color: red;
}
</style>
 

父元件程式碼：

<template>
     <v-child v-bind:number="number"></v-child>   //引用子元件，動態繫結資料
  </div>
</template>
<script>
import son from './components/child.vue';  //首先匯入子元件
export default {
  name: 'App',
  components: {
    'v-child': son  //定義子元件名稱
  },
  data () {
    return {
      number:123  //需要傳遞的資料。
     }
    }
  }
 

子元件向父元件通訊

原理：
子元件通過this.$emit(‘方法名’，‘引數’)傳遞，
父元件通過 v-on:方法名=“function()”來接收。

子元件程式碼：

<template>
<div class="child">
    <button v-on:click="increase">減一</button>   {{number}}    <button>加一</button>
</div>
</template>
<script>
export default {
props:['number'],
    data (){
        return {
            numbers:12
        }
    },
    methods: {
        increase () {
            this.$emit('incre',1);   //通過該方法與父元件通訊
        }
    }
}
</script>
<style scoped>
.child {
    color: red;
}
 

父元件程式碼：

 <v-child v-bind:number="number" v-on:incre="jian"></v-child>
 
  methods: {
    jian(){
      this.number--
      }
    }

邏輯就是：子元件點選按鈕觸發increase函式，然後執行該函式通過$emit()方法定義jian（）傳遞出去，父元件通過v-on方法檢測到jian()並執行。導致父元件number變化，相應的子元件number也跟著變化。