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

实现步骤：

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