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

需求

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

如何解决：再使用一次父传子，:a="index" 将下标值传递给子组件注意要加引号

在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>

巴特西

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

最新文章

热门文章