抽离组件后 如果我们点击按钮弹窗子组件的弹窗使之显示在父组件中

那么就要更改子组件的dialogVisible值，要使用ref 关联子组件 这样我们才可以更改其值  话不多说，直接上代码

如果不将子组件的dialogVisible传给父组件 那么这个弹框很可能出现点击没有反应，

 

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>这是一段信息</span>
</el-dialog>

<script>
  export default {
    name:"upload",
    data() {
      return {
        dialogVisible: false
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>

 

<template>
  <div id="App"> 
    <el-button @click="showUpload">上传文件</el-button>
    <upload ref="upload"></upload>

  </div>
</template>
 
<script>
import upload from "../src/components/upload.vue"
  export default {
    name: 'App',
    components:{
      upload
    },
    data () {
      return {
        
      }
    },
    methods: {
      showUpload(){
        this.$refs.upload.dialogVisible=true
      },
    }
  }  
</script>
 
<style scoped>
  .div-label {
    padding: 20px 0;
    width: 100%;
  }
</style>