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

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

需求


1425695-20191202232357423-1863490570.png1425695-20191202232410292-766332690.png


需求:


除了拿到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>

1425695-20191202232801220-837612088.png

相关文章
|
3天前
|
JavaScript 前端开发 安全
Vue响应式设计
【5月更文挑战第30天】Vue响应式设计
23 1
|
2天前
|
JavaScript
vue知识点
vue知识点
9 2
|
3天前
|
JavaScript 程序员 网络架构
vue路由从入门到进阶 --- 声明式导航详细教程
vue路由从入门到进阶 --- 声明式导航详细教程
vue路由从入门到进阶 --- 声明式导航详细教程
|
3天前
|
资源调度 JavaScript UED
vue路由的基础知识总结,vueRouter插件的安装与使用
vue路由的基础知识总结,vueRouter插件的安装与使用
|
3天前
|
JavaScript
|
3天前
|
编解码 JavaScript API
Vue在移动端的表现如何?
【5月更文挑战第30天】Vue在移动端的表现如何?
10 2
|
3天前
|
JavaScript 前端开发 API
Vue与其他框架的对比优势
【5月更文挑战第30天】Vue与其他框架的对比优势
11 1
|
4天前
|
JavaScript
Vue常用知识点总结
Vue常用知识点总结
11 0
|
5天前
|
JavaScript Java 测试技术
基于vue和微信小程序的校园自助打印系统+springboot+vue.js附带文章和源代码设计说明文档ppt
基于vue和微信小程序的校园自助打印系统+springboot+vue.js附带文章和源代码设计说明文档ppt
25 7
|
5天前
|
JSON JavaScript 前端开发