Vue-組件自定義事件

父組件使用props傳遞資料給子組件，子組件給父組件通信除了通過父組件提前給子組件傳遞一個函式，子組件使用該函式，利用傳遞引數的形式給父組件傳值，回呼在父組件中，

這里再提供一種方法：Vue的自定義事件，本文將詳細介紹Vue自定義事件

使用場景：A是父組件，B是子組件，B想給A傳資料，那么就要在A中給B系結自定義事件（事件的回呼在A中）

系結自定義事件的方式

?? 第一種方式 ??

在父組件中：

<Student @atguigu ='test' /> 或 <Student v-on:atguigu = 'test'>

methods:{

//除了接受第一個引數，其他引數都放在陣列里面

test(name, ...params) {.....}

}

?? 第一種方式 ??

在父組件中：

<Student ref ='demo' />

methods:{

//除了接受第一個引數，其他引數都放在陣列里面

test(name, ...params) {.....}

}

mounted() {

this.$refs.demo.$on('atguigu',this.test)

}

子組件觸發自定義事件

this.$emit('atguigu',this.name, this.sex, 800)

// 子組件觸發自定義事件的時候可以傳遞多個引數

解綁自定義事件

?? 解綁一個自定義事件：this.$off('atguigu')

?? 解綁多個自定義事件：this.$off(['atguigu', 'demo'])

?? 解綁所有的自定義事件：this.$off()

組件上也可以系結原生DOM事件，需要使用native修飾符

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

注意事項：

通過this.$ref.xxx.$on('atguigu',回呼)，系結自定義事件時，回呼要么配置在methods中，要么用箭頭函式，否則this指向會出問題

完整案例

App.vue父組件

<template>
  <div class="bgq">
    <h1>{{ atguigu }}-{{studentname}}</h1>
    <!-- 通過父組件給子組件系結一個自定義事件實作：子給父專遞資料(第一種寫法使用@)添加once的話就是只觸發一次@atguigu.once -->
    <!-- <Student @atguigu="getStudentName" @demo="m1" /> -->
    <!-- 通過父組件給子組件系結一個自定義事件實作：子給父專遞資料(第二種寫法使用ref) -->
    <Student ref="student" @click.native="show" />
  </div>
</template>

<script>
import Student from "./components/Student.vue";
export default {
  name: "App",
  components: { Student },
  data() {
    return {
      atguigu: "你好啊",
      studentname: "",
    };
  },
  methods: {
    getStudentName(name, ...params) {
      //除了接受第一個引數，其他引數都放在陣列里面
      console.log("收到了學生的名字", name, params);
      this.studentname = name;
    },
    m1() {
      console.log("demo被觸發了");
    },
    show(){
      alert('我是被系結在組件上面的原生的DOM事件')
    }
  },
  mounted() {
    //系結自定義事件
    //3秒后出發
    // setTimeout(() => {
    //   this.$refs.student.$on("atguigu", this.getStudentName);
    // }, 3000);
    //正常觸發
    this.$refs.student.$on("atguigu", this.getStudentName);
    //只觸發一次
    // this.$refs.student.$once("atguigu", this.getStudentName);
  },
};
</script>

<style scoped>
.bgq {
  background-color: skyblue;
  padding: 5px;
}
</style>

Student.vue子組件

<template>
  <div class="bg">
    <h2>學生名稱：{{ name }}</h2>
    <h2>學生性別：{{ sex }}</h2>
    <h2>number: {{ number }}</h2>
    <button @click="add">點我number子加</button>
    <button @click="sendStudentName">點我獲得學生的姓名</button>
    <button @click="unbind">解綁atguigu事件</button>
    <button @click="dath">點我摧毀Student組件的餓實體物件vc</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      name: "張三",
      sex: "男",
      number: 0,
    };
  },
  methods: {
    //原生dom事件增加
    add() {
      console.log(
        "我是原生DOM事件，即使Student組件被摧毀了，我還是會呼叫，但是頁面不會輸出"
      );
      this.number++;
    },
    sendStudentName() {
      //觸發student組件實體身上的auguigu事件 傳遞多個引數
      this.$emit("atguigu", this.name, this.sex, 800);
      //觸發damo事件
      this.$emit("demo");
    },
    unbind() {
      //解綁atguigu事件，只能解綁一個自定義事件
      // this.$off('atguigu')
      //解綁多個自定義事件
      this.$off(["atguigu", "demo"]);
      //解綁所有的自定義事件
      // this.$off();
    },
    dath() {
      //摧毀了stedent的實體物件vc，摧毀后所有的Student身上的自定義事件不起效果
      this.$destroy();
    },
  },
};
</script>

<style scoped>
.bg {
  background-color: plum;
  padding: 5px;
  margin-top: 10px;
}
</style>