vue 父子传值

最新推荐文章于 2024-09-05 11:08:38 发布

可恨的资本家

最新推荐文章于 2024-09-05 11:08:38 发布

阅读量167

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/tttrycatch/article/details/126526846

版权

子页面引入

<index_1 ref="dialogVisible" > </index_1>

import 注入

import index_1 from "./index_1";

components注入

components: {index_1},

方法点击

@click="checkDetails(scope.row)"

控制子页面打开同时给子页面传递参数

this.$refs.dialogVisible.dialogVisible = true;
      this.$refs.dialogVisible.setData(row.id)

子页面接收

methods方法中写方法setData（形参，叫什么都可以）

子页面给父页面传回来

方法

@click="selectOne(scope.row)"

 selectOne(row) {
      this.$emit("choose",row.peopleId,row.name);
    }

后面是传递的参数，前面双引号内容在父页面引入的时候使用

 <selectPeople ref="dialogVisible"  @choose="choose"/>

写方法将子页面的值附给父页面

choose(peopleId, peopleName) {
      this.villageFamilyPeopleList[this.memberInfoIndex - 1].peopleName = peopleName;
      this.villageFamilyPeopleList[this.memberInfoIndex - 1].peopleId = peopleId;
      this.$refs.dialogVisible.dialogVisible = false;
      this.dialogVisible = false;
    },