Vue 3.x 組件的自定義事件v-on: 和 $emit

組件有各種事件，比如，點擊事件 @click 、鍵盤事件 @keyup

v-on: 指令可以簡寫成 @

一、自定義組件中，子組件獲取父組件的數據

1、調用子組件時，定義事件<my-header @parentRun="run"></my-header>

<template>
  <div>
    //自定義一個事件 parentRun，該事件執行時會調用run方法
    <my-header @parentRun="run"></my-header>
  </div>
</template>

<script>
import MyHeader from '../components/MyHeader'
export default {
  data() {
    return {
      msg: "主頁"
    }
  },
  components:{
      MyHeader
  },
  methods:{
    run(){
      alert("我的home組件的run方法")
    }
  }
};
</script>

2、子組件使用this.$emit("parentRun")調用父組件數據和方法

<template>
    <div>
        <button @click="myRun">獲取父組件傳過來的方法</button> 
        <br>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                msg: "頭部組件",
            }
        },
        methods:{
            myRun(){
                //調用父組件自定義的parentRun事件
                this.$emit("parentRun")
            }
        }
    }
</script>

二、自定義組件中，父組件獲取子組件的數據

1、一樣也是調用組件時，定義一個方法，同上，但是方法中要加入參數，用於獲取子組件傳值

<template>
  <div>
    <my-header @parentRun="run"></my-header>
  </div>
</template>

<script>
import MyHeader from '../components/MyHeader'
export default {
  data() {
    return {
      msg: "主頁"
    }
  },
  components:{
      MyHeader
  },
  methods:{
    //加入參數value 用於接收子組件的傳值
    run(value){
      alert(value)
    }
  }
};
</script>

2、子組件調用的事件要，回傳一個參數

<template>
    <div>
        <button @click="myRun">獲取父組件傳過來的方法</button> 
        <br>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                msg: "頭部組件",
            }
        },
        methods:{
            myRun(){
                //調用父組件自定義的parentRun事件，第二個參數是傳值給父組件
                this.$emit("parentRun","我是子組件傳值")
            }
        }
    }
</script>

總結

1、一種組件間通信的方式，適用於：子組件給父組件傳遞數據
2、使用場景：A是父組件，B是子組件，B想給A傳數據，那么就要在A中給B綁定自定義事件事件的回調在A中。
3、綁定自定義事件：
test是一個寫在父組件中的方法
①. 第一種方式，在父組件中：

 <Demo @myevent="test"/>  或 <Demo v-on:myevent="test"/>

②. 第二種方式，在父組件中：

    <Demo ref="domo"/>
      mounted(){
        this.$refs.domo.$on('myevent',this.test)
      }

③若想讓自定義事件只能觸發一次，可以使用 once 修飾符，或 $once 方法。
4、觸發自定義事件：

this.$emit('myevent',數據) 
//這里的回傳數據可以是 字符串、對象、數組	

//單個參數
this.$emit('事件名稱',this.name)
//父組件中接收
 welcome(name，age){
      console.log(student.name)
    }


//多個參數一個個傳的方式
this.$emit('事件名稱',this.name,this.age)
//父組件中接收
 welcome(name，age){
      console.log(student.name)
    }
//如果參數特別多后面參數可以使用 ...params
 welcome(name，...params){
      console.log(student.name，...params)
    }


//多個參數 ，對象形式
student：{name:"lucy",age:18}
this.$emit('事件名稱',this.student)
//父組件中接收
 welcome(student){
      console.log(student.name)
    }

//多個參數 ，數組形式
hobby:["吃飯","睡覺","打代碼"]
this.$emit('事件名稱',this.student)
//父組件中接收
  welcome(hobby){
      console.log(hobby[0])
    }

5、解綁自定義事件

//解綁單個自定義事件，直接寫事件名稱
this.$off('myevent') 
//解綁多個自定義事件，寫成數組形式
this.$off(['myevent1','myevent2'])
//暴力解綁所有自定義事件
this.$off()

6、組件上也可以綁定原生DOM事件，需要使用native修飾符。

<Student ref="student" @click.native="show"/>

7、注意：通過this.$refs.xxx.$on('myevent',回調)綁定自定義事件時，回調要么配置在methods中，要么用箭頭函數，否則this指向會出問題！
如果沒有寫成箭頭函數，this指向的是自定義事件所在的那個組件