本文共 920 字，大约阅读时间需要 3 分钟。

实现步骤：

1. 新建两个页面，一个父一个子

2. 父页面引入子页面

3. 父页面添加子页面标签

4. 子页面default中定义props即可使用父页面传过来的值

5. 子页面调用父页面的方法

具体代码实现：

父页面：

1.引入子组件

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

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

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方法，把该组件关闭。

转载地址：http://wsxvi.baihongyu.com/