zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    [nginx&php]相关的Q&A
    [C++] 类中的虚函数
    [Linux] 从外网访问内网硬盘
    官网上下载Python安装包的选择
    计数排序的优化版
    插入排序
    Python一些坑
    Linux 一些冷门实用的命令
    分布式爬虫中的在ubuntu镜像里面安装redis的一些细节(-)
    vscode快捷键
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/11973995.html
Copyright © 2011-2022 走看看