vue elementUI 组件

子组件

<template>
    <div>
        <el-dialog :visible.sync="dialogVisible" width="884px" @open="open">
               <div><img style="margin:0 auto;"  :src="viewSrc" width="400px" height="400px"/></div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name:"image-amplify",
    props:["viewSrc"],
    data(){
        return {
            dialogVisible:false,
        }
    },
    methods:{
        init() {
            this.dialogVisible = true;
        },
        open(){

        }
    }
}
</script>
<style lang="scss">
    
</style>

父组件

template

<ImageAmplify ref="amplify" :viewSrc="viewSrc" />

在javascript代码块中导入组件

import ImageAmplify from "./imageAmplify.vue";  //导入组件

在javascript代码块中挂载组件

//挂载组件
    components: {
        ImageAmplify, //自定义的标签
    },

用$refs可以访问到 子组件里的变量

this.$ref.amplify.init()就是调用子组件里的函数

 //点击放大
openAmplify() {
   this.viewSrc = this.imageUrl;
   //init()  是子组件里的方法（控制弹窗 "显示"和"关闭"）
   this.$refs.amplify.init();
},