实现步骤:
-
新建两个页面,一个父一个子
-
父页面引入子页面
-
父页面添加子页面标签
-
子页面default中定义props即可使用父页面传过来的值
-
子页面调用父页面的方法
具体代码实现:
父页面:
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方法,把该组件关闭。