1. 父元件向子元件傳遞

• 父元件程式碼

<template>
  <div id="app">
    <h1>This is Parent component</h1> 
    <Child :parent-word='msg'></Child>
  </div>
</template>

<script>
import Child from "./components/Child.vue";
export default {
  name: "parent",
  data() {
    return
 
 {
      msg: "Hello,my son"
    };
  },
  components: {
    Child
  }
};
</script>

• 子元件程式碼

<template>
  <div>
    I'm Child component.
    <p>parent's word:{{parentWord}}</p>
  </div>
</template>

<script>
export default {
  name: "son",
  props: ["parent-word"
 
],
  data() {
    return {
      msg: "Hello,my son"
    };
  }
};
</script>

• 以上實現從父元件傳遞parentWord的訊息到子元件，子元件接收並顯示
• 這裡需要注意如果是駝峰寫法的變數的話，在傳遞的時候要使用-連線，如：parent-word，在子元件生命註冊的時候也是使用parent-word，使用的時候可以使用駝峰寫法

2. 子元件像父元件傳遞

• 父元件程式碼

<template>
  <div id="app">
    <h1>This is Parent component</
 
h1> 
    <Child  @childEvent='listentToChild'></Child>
    <p>child's word:{{childWord}}</p>
  </div>
</template>

<script>
import Child from "./components/Child.vue";
export default {
  name: "parent",
  data() {
    return {
      childWord: ""
    };
  },
  components: {
    Child
  },
  methods: {
    //接收子元件傳遞過來的資訊並顯示
    listentToChild(data) {
      this.childWord = data;
    }
  }
};
</script>

<style></style>

• 子元件程式碼

<template>
  <div>
    I'm Child component.
    <button @click="greet">問候爹地</button>
  </div>
</template>

<script>
export default {
  name: "son",
  methods:{
    //點選按鈕傳送訊息給父元件
    greet(){
      this.$emit("childEvent",'Hello!Mammy')
    }
  }
};
</script>

``

- 父元件通過@childEvent='listentToChild'註冊一個方法監聽子元件傳遞過來的訊息
- 子元件通過 this.$emit("childEvent",'Hello!Mammy')方法向父元件傳遞訊息。this.$emit中的第一個引數正是@childEvent='listentToChild'中的childEvent