自學Vue必看的父子組件通信（二）

父子組件通信—父傳子

在我的上一篇文章中提到了父子組件通信中的父傳子，如何您還不瞭解，建議參考：自學Vue必看的父子組件通信（一），迴歸正題！！！

父子組件通信—子傳父

子傳父是當子組需要向父組件傳遞數據時，就要用到自定義事件。
步驟：
（1）在子組件中，通過 $emit() 來觸發某一事件A
（2）在父組件中通過v-on監聽事件A，完成父組件的功能，實現子傳父

舉例展示

注意事項：
（1）通過 $emit() 來觸發某一事件A可以傳參數，也可以不傳參數。
（2）v-on在這裏監聽使用時不支持駝峯命名法，只有在腳手架中可以用駝峯命名法
（3）v-on不僅僅可以用於監聽DOM事件，也可以用於組件間的自定義事件
（4）子傳父在父模板中方法省略參數，在其他情況中默認傳入事件對象。而這裏是默認傳入該參數，不是傳入事件對象

HTML

  //<!-- 父組件模板 -->
<div id="app">
  //<!-- 這裏不支持駝峯命名法，只有在腳手架中可以用駝峯命名法 -->
  <cpn @btn-click1="responseClick1"></cpn>
  //<!-- 省略參數，在其他情況中默認傳入事件對象。而這裏是默認傳入該參數，不是傳入事件對象-->
  <cpn @btn-click2="responseClick2"></cpn>
</div>

//<!-- 子組件模板 -->
  <template id="cpn">
    <div>
      <button v-for="book in books" @click="btn(book)">{{book.name}}</button>
    </div>
  </template> 

JavaScript

<script src="../vue.js"></script>
<script>
//子組件
  const cpn = {
    template:"#cpn",
    data() {
      return {
        books:[
          {id:1, name:"紅樓夢"},
          {id:2, name:"水滸傳"},
          {id:3, name:"三國演義"},
          {id:4, name:"西遊記"}
        ]
      }
    },
    methods:{
      btn(book) {
        //發送事件（無參數）
        this.$emit("btn-click");
        //發送事件（有參數）
        this.$emit("btn-click2",book);

      }
    }
  }
  //Vue實例
  const app = new Vue({
    el:'#app',
    data:{
      message:"hello vue"
    },
    components:{
      cpn
    },
    methods:{
      responseClick1() {
        console.log("我是沒有參數的");       
      },
      responseClick2(book) {
        console.log(book);       
      }
    }
  })
</script>

效果圖示