vue父子元件間通信

父元件向子元件通信

原理： 父元件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也跟着變化。