1.子元件view

子元件定義了一個click事件add點選來發送count值，並設定emit觸發自定義事件numchange

<template>
 <div>
  <button @click="add()">+1</button>
 </div>
</template>
<script>
export default {
 data() {
  return {
   count: 0,
   };
  },
 methods: {
  add() {
   this.count += 1;
   //  修改資料時，通過$emit()觸發自定義事件
   this.$emit("numchange", this.count);
   },
  },
};
</script>
<style scoped>
div {
 background-color: blueviolet;
}
</style>
​
 

2.父元件App.view

1.父元件需要import引入子元件的元件

import Views from "./views/views.vue";

2. components掛載Views

3. 在佔位符中引用子元件的自定義事件numchange

     <views @numchange="getNewCount"></views>

   4.在methods方法中定義這個自定義事件的點選事件,

   val值是接受的子元件傳遞的this.count值

      getNewCount(val) {
       this.countFromson = val
      },

   App.vue

   getNewCount不需要加()，加括號後 methods中的getNewCount(val)是拿不到值得

<template>
 <div>
  <views @numchange="getNewCount"></views>
  <p>來自子元件的值{{countFromson}}</p>
 </div>
</template>
<script>
import Views from "./views/views.vue";
export default {
 data() {
  return {
   countFromson: 0,
   };
  },
 components: {
  Views,
  },
 methods: {
  getNewCount(val) {
   this.countFromson = val
   },
  },
};
</script>
<style scoped>
</style>
​