vue项目中封装弹窗组件

父组件

<el-link type="primary" :underline="false" @click="openEdit(row)"
            >查看
          </el-link>
    <!-- 使用 -->
    <adio :data="current" :visible.sync="showEdit" ></adio>```

//注册组件
import adio from "@/views/users/adio.vue";
export default {
  components: {
    adio
  },
  data(){
return {
      // 是否显示弹窗
      showEdit: false,
      // 当前数据
      current: null
      }
     },
     methods:{
    /* 显示编辑 */
    openEdit(row) {
      this.current = row;
      this.showEdit = true;
    },
}

子组件

  <el-dialog :visible="visible" width="40%" @update:visible="updateVisible">
{{this.data}}
</el-dialog>

<script>
export default {
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  methods: {
    /* 更新visible */
    updateVisible(value) {
      this.$emit("update:visible", value);
    }
  }
};
</script>

这里有几个细节需要注意，子组件不能修改父组件传递的参数，所以传递给el-dialog的visible不能加.sync， 然后监听update:visible事件再用$emit回调给父组件，父组件就可以用.sync了。