VUE中父子页面传值，子页面调用父页面方法

向右看齐 2022-12-27 07:21 843阅读 0赞

## 实现步骤： ##

1.  新建两个页面，一个父一个子
2.  父页面引入子页面
3.  父页面添加子页面标签
4.  子页面default中定义props即可使用父页面传过来的值
5.  子页面调用父页面的方法

# 具体代码实现： #

父页面：

1.引入子组件

import ImgSplit from "@/components/ImgSplit/index";

2.添加子组件标签，这里的tCropHeight和tCropWidth我是动态获取的。

<ImgSplit v-if="open" ref="ImgSplit"  @closeImgSplit="closeImgSplit"  :tCropWidth="tCropWidth" :tCropHeight="tCropHeight"></ImgSplit>

3.添加父页面方法，关闭方法

//关闭图片上传框
        closeImgSplit:function(bool){
          this.open = bool;
        },

子页面：

1.使用prop接受父页面传过来的值

export default {
        name: "img-split",
        //重点是下面定义的属性，这个属性的type有多种类型Boolean，Number，String，Function等，自行百度
        props: {
          tCropWidth: {
            type: Number,
            default: 800
          },
          tCropHeight: {
            type: Number,
            default: 800
          },
          closeImgSplit: {
            type: Function,
            default: () => {}
          }
        },
        data() {
          return {
              autoCropWidth: this.tCropWidth,
              autoCropHeight: this.tCropHeight
          }
        },

使用的时候this.该属性即可，例如this.tCropWidth

2.子页面调用父页面方法

//使用$emit方法即可，前面是方法名，后面是参数
    this.$emit('closeImgSplit', false);
    
    //写完这一行即可调用父页面的closeImgSplit方法，把该组件关闭。

发表评论取消回复

表情：

评论列表（有 0 条评论，843人围观）

还没有评论，来说两句吧...

相关阅读

相关 VUE中父子页面传值，子页面调用父页面方法

实现步骤： 1. 新建两个页面，一个父一个子 2. 父页面引入子页面 3. 父页面添加子页面标签 4. 子页面default中定义props即可使用父页面传过来的

向右看齐/ 2022年12月27日 07:21/ 0 赞/ 844 阅读

相关【JS】:JS中父页面与子页面传值

一、子页面是父页面通过window.open弹出的情况子页面要向父页面传值，只要在document前面加window.opener即可。如： 1.父页面代码：

布满荆棘的人生/ 2022年06月18日 11:43/ 0 赞/ 344 阅读

相关 iframe——html子页面调用父页面的方法

$( function () \{ //在iframe子页面中查找父页面元素 alert($( '\default' , window.parent.document

心已赠人/ 2022年05月25日 00:36/ 0 赞/ 438 阅读

相关 iframe 父页面调用子页面方法

<script type="text/javascript"> //调用子页面的方法. var childWi

￡神魔★判官ぃ/ 2022年03月14日 09:36/ 0 赞/ 1210 阅读

相关 uni-app子页面与父页面互相传值

main.js中添加 ![20190507104153417.png][] 点击列表按钮打开新页面 ![watermark_type_ZmFuZ3poZW5naGV

朱雀/ 2022年02月04日 07:45/ 0 赞/ 886 阅读

相关 vue 子页面调父页面方法

1.创建util.js import Vue from 'vue' export default new Vue() 2.父页面子页面分别引入 i

我会带着你远行/ 2021年09月30日 02:44/ 0 赞/ 675 阅读

相关 layer open 子页面调用父页面的方法

> 问题情景：比如收货地址列表我要新增一个地址，使用layer的弹窗获取用户输入信息，在保存的时候调用父页面已经定义的获取收货地址列表的方法，以此来不刷新页面的同时，刷新列表，

淡淡的烟草味﹌/ 2021年09月24日 01:26/ 0 赞/ 1426 阅读

相关 Layer Open子页面给父页面传值

> 首先是父页面上，打开一个弹出框 layer.open({ type: 2, title: false, maxmi

约定不等于承诺〃/ 2021年09月18日 23:44/ 0 赞/ 995 阅读

相关 vue 父级页面向子页面通过url传值，子页面接受值

父页面传token sendParams(){ this.$router.push('/medicalImaging?token=528720

拼搏现实的明天。/ 2021年09月16日 14:46/ 0 赞/ 689 阅读

相关 vue父子页面传值

1.props 传值 //父组件传递参数到自组件 <template> <div> <my-vue :name="na

小鱼儿/ 2021年08月26日 20:19/ 0 赞/ 511 阅读