Vue中子组件的显示与隐藏方式

<template>
  <div class="contain">
    <p>这里是父组件页面</p>
    <button @click="showDialog(true)">显示</button>
    <button @click="showDialog(false)">隐藏</button>
    <!-- 这里使用v-show -->
    <subDialog v-show="dialog_visible"></subDialog>
  </div>
</template>

<script>
// 引入子组件
import subDialog from "@/components/Dialog/subDialog";
export default {
  components: { subDialog },
  data() {
    return {
      // 控制子组件显示与隐藏的标识，类型为Boolean
      dialog_visible: false
    }
  },
  methods: {
    showDialog(visible) {
      this.dialog_visible = visible;
    }
  }
}
</script>

<style lang="scss" scoped>
/* 加入css代码仅是为了使界面更加直观 */
.contain {
  height: 300px;
  width: 400px;
  text-align: center;
  padding: 20px;
  background-color: #9dd3fa;
}
</style>

<template>
  <div class="sub-contain">
    <p>这里是子组件窗口</p>
  </div>
</template>

<script>
export default {
  
};
</script>

<style lang="scss" scoped>
/* 加入css代码仅是为了使界面更加直观 */
.sub-contain {
  height: 150px;
  width: 100%;
  padding: 20px;
  text-align: center;
  margin-top: 20px;
  background-color: #1f6fb5;
  color: #fff;
}
</style>

<template>
  <div class="contain">
    <p>这里是父组件页面</p>
    <button @click="showDialog(true)">显示</button>
    <button @click="showDialog(false)">隐藏</button>
    <!-- 新增了向子组件传递的参数dialog_visible 与 自定义事件dialogVisibleEvent -->
    <subDialog 
	  v-show="dialog_visible" 
      :dialog_visible="dialog_visible"
      @dialogVisibleEvent="showDialog">
   	</subDialog>
  </div>
</template>

<script>
// 引入子组件
import subDialog from "@/components/Dialog/subDialog";
export default {
  components: { subDialog },
  data() {
    return {
      // 控制子组件显示与隐藏的标识，类型为Boolean
      dialog_visible: false
    }
  },
  methods: {
    showDialog(visible) {
      this.dialog_visible = visible;
    }
  }
}
</script>

<style lang="scss" scoped>
/* 加入css代码仅是为了使界面更加直观 */
.contain {
  height: 300px;
  width: 400px;
  text-align: center;
  padding: 20px;
  background-color: #9dd3fa;
}
</style>

<template>
  <div class="sub-contain">
    <p>这里是子组件窗口</p>
    <button @click="doClose">隐藏</button>
  </div>
</template>

<script>
export default {
  props: {
    dialog_visible: Boolean
  },
  data() {
    return {
      visible: this.dialog_visible
    }
  },
  watch: {
    visible(val) {
      this.dialog_visible = val;
    }
  },
  methods: {
    doClose() {
      // 触发父组件中的dialogVisibleEvent事件，并传递参数
      this.$emit('dialogVisibleEvent', false);
    }
  }
};
</script>

<style lang="scss" scoped>
.sub-contain {
  height: 150px;
  width: 100%;
  padding: 20px;
  text-align: center;
  margin-top: 20px;
  background-color: #1f6fb5;
  color: #fff;
}
</style>