vue通过props设置子组件隐藏和显示

在前端开发中，经常会碰到这样的场景，在父组件中，打开一个子组件，当点击子组件界面上的关闭按钮时，可以直接关闭子组件，并且能够同时更新父组件中的值，比如在element-ui框架中，经常会用到dialog，当点击dialog界面上的关闭按钮时，可以直接关闭弹窗，在父组件中设置dialog显示的代码中有一个visible属性，并且还有一个.sync，看了下dialog的源码，具体实现方式如下所示：

创建属性

首先在props添加一个visible的属性，用于控制界面的显示与隐藏，如下所示：
.js文件

export default {
    name: 'TreeManager',
    props: ['visible'],
    data() {
      return {
        
      };
    },
    components: {
    },
    created() {
    },
    mounted() {
    },
    methods: {
      closeHandler() {
        this.$emit('update:visible',false);
      },
    },
  };

.vue

<template>
  <div class="layer-manager" v-show="visible">
    <el-card class="layer-card">
      <div slot="header" class="clearfix">
        <span>图层管理</span>
        <div class="tree-menu">
          <el-button
            type="text"
            icon="el-icon-document-add"/>
          <el-button
          class="btn-close"
          type="text"
          icon="el-icon-close"
          @click="closeHandler"/>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script src='./index.js'>
</script>

<style lang='less'>
@import './index.less';
</style>

父组件

在父组件中只需通过一个变量设置给:visible.sync就可以了。

<TreeManager :visible.sync="layerVisible" class="layer-manager-layout"/>

核心代码

其实起作用的主要就是靠以下的代码来进行更新。

 closeHandler() {
        this.$emit('update:visible',false);
      },

个人博客