一、父元件及程式碼解釋：

<template>
  <div>
    <p v-for="msg in messages">{{msg}}</p>               <!--輸出子元件傳給父元件的資料-->
<my-button4 @onclick="increment"></my-button4>       <!--自定義方法onclick監聽子元件觸發情況-->
</div>
</template>
<script>
import myButton4 from 
 
'./components/myButton4.vue'
export default{
    data(){
      return{
        messages:[]         /*定義集合messages接收從子元件傳來的資料，因為事件可以不止觸發一次，所以用集合*/
}
    },
methods:{
      increment:function(payload){                /*payload表示從子元件傳遞回來的資料*/
this.messages.push(payload.message1)     /*將每次從子元件傳過來的資料payload放到集合messages中*/
 
                                                  /*由於子元件傳過來的是一個物件，所以用payload.message1*/
}
    },
components:{
      myButton4                         /*注意：子元件的例項一定要放在方法和資料之後，要不然很容易節後不到資料*/
}
  }
</script>

二、子元件級程式碼解釋：

<template>
  <div>
    <input type="text" v-model="message">              
 
<!--定義一個文字輸入框，用 v-model進行雙向繫結-->
<button @click="handleSendMessage">Send</button>   <!--定義一個按鈕，建立點選事件handleSendMessage-->
</div>
</template>
<script>
export default{
    data(){
      return{
         message:"the Test"
}
    },
methods:{
      handleSendMessage:function(){      /*如果點選事件發生，則觸發父元件的監聽事件onclick，也就是increment方法*/
this.$emit("onclick",{message1:this.message})    /*傳值，將一個物件傳回去給increment方法，也可以傳陣列*/
}
    }
  }
</script>

三、執行截圖：

1、開始截圖：

2、第一次點選send截圖：

3、第二次點選send截圖：