Vue子組件向父組件通信，父組件向子組件通信

首先，子組件代碼如下

<template>
  <div style="border:1px solid black;width:400px;">
    <h3>我是子組件里的</h3>
    <button>點擊按鈕子組件傳遞父組件</button>
    <div>我是父組件傳子組件顯示的:我還沒有值</div>
  </div>
</template> 

<script>
export default {
  data() {
    return {};
  },
  components: {},
  methods: {}
};
</script>

父組件代碼如下

<template>
  <div style="border:1px solid red;padding:2rem;width:500px;margin:50px auto;">
    <h3>我是父組件里的</h3>
    <div>我是子組件向父組件傳遞的:我還沒有值</div>
    <MyChild></MyChild>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  components: {},
  methods: {}
};
</script>

網頁顯示如圖：

 

網頁顯示可以清晰的看出來父子組件的結構，父組件包裹着子組件。

首先，我們先讓父組件向子組件通信吧。實現方法是在子組件通過props來接受父組件傳過來的值。我們在父組件定義了一個名為data的值，在子組件標簽里bind動態綁定了這個值，如下圖所示

先定義變量

修改MyChild標簽內容

接着在子組件里通過props來接收，如下圖

 這樣子組件就接收到了父組件傳遞過來的值了，我們通過修改以下代碼來看看這個值到底有沒有接收到

 可以看到，我們父向子通信已經實現了，接下來就是子向父通信了，這個就要使用到this.$emit方法了。通過this.$emit("")來自定義事件，然后在父組件中監聽事件。

在子組件中給button按鈕click事件，來通過this.$emit自定義事件，並傳入一個參數，具體修改代碼如圖：

在父組件中的子組件標簽里，先在data里定義一個變量接收這個值，監聽自定義事件，並接受這個參數賦值給定義的變量，修改代碼如圖：

再添加一個變量

 然后再修改MyChild標簽

再在父組件的div里顯示，代碼如下：

 現在進入到瀏覽器中，點擊子傳父的按鈕，結果出來了，下圖展示整個運行結果

由此子向父，父向子通信就都完成了。

講的可能有些亂，附上完整代碼就好多了：

Home.vue

<template>
  <div style="border:1px solid red;padding:2rem;width:500px;margin:50px auto;">
    <h3>我是父組件里的</h3>
    <div>我是子組件向父組件傳遞的:{{childData}}</div>
    <MyChild :fromFather="data" @ListenerChild="(data)=>this.childData = data"></MyChild>
  </div>
</template>

<script>
import MyChild from "./Child";
export default {
  data() {
    return {
      data: "I am your father",
      childData: ""
    };
  },
  components: {
    MyChild
  },
  methods: {}
};
</script>

Child.vue

<template>
  <div style="border:1px solid black;width:400px;">
    <h3>我是子組件里的</h3>
    <button @click="()=>this.$emit('ListenerChild', 'I am your child')">點擊按鈕子組件傳遞父組件</button>
    <div>我是父組件傳子組件顯示的:{{fromFather}}</div>
  </div>
</template>

<script>
export default {
  props: ["fromFather"],
  data() {
    return {};
  },
  components: {},
  methods: {}
};
</script>