Vue你不知到的$this.emit()的用法

需求

 

 

 

 

 

 需求:除了拿到false,還要拿到v-for中的index 

 如何解決：再使用一次父傳子，:a="index" 將下標值傳遞給子組件   注意要加引號

  <experts @handlerchange="ChangeV"  :a="index"></experts>

 

在html頁面直接{{a}}就可以使用props中的值，

在methods:{}中要通過this哦 

this.$emit("handlerchange", [this.a, false]);

 

this.$emit()中的傳遞多個參數使用中括號哦

子組件

<template>
  <!-- 子組件 -->
  <div>
    <h2 @click="getcon">123--{{a}}</h2>
  </div>
</template>
<script>
export default {
  props: ["a"],
  methods: {
    getcon() {
      this.$emit("handlerchange", [this.a, false]);
    }
  }
};
</script>

 

父組件

<template>
  <div>
    <div v-for="(item,index) in arr" :key="index" class="box">
      <h2>標題</h2>
      <p>{{item.name}}</p>
      <experts @handlerchange="ChangeV" :a="index"></experts>
    </div>
  </div>
</template>

<script>
import experts from "../../../components/myExperts";
export default {
  data() {
    return {
      arr: [
        { name: "張三", id: "1" },
        { name: "張四", id: "2" },
        { name: "王五", id: "3" }
      ]
    };
  },
  components: {
    experts
  },
  methods: {
    ChangeV(meass) {
      console.log(meass);
    }
  }
};
</script>
<style scoped>
.box {
  margin-top: 20px;
}
</style>