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>