vue 子组件封装 开启关闭模态框

效果

总结思路

1. 导入子组件并且注册使用
2. 在父组件的子组件标签上v-show或者v-if 定义一个变量show 控制盒子的显示与隐藏。
3. 通过按钮的点击事件给show赋值为true，显示盒子。
4. 这里利用了子传父的方法，子组件中定义一个事件，在事件中子传父一个事件和参数，在父组件的子组件标签上绑定上子组件传过来的自定义事件，事件中赋值给show 关闭模态框。

话不多说直接上代码

封装子组件

• 子组件代码如下

<template>
  <div class="box">
    <p @click="exit">关闭</p>
  </div>
</template>

<script>
export default {
  methods: {
    //关闭的函数
    exit() {
      //这边子传父 第一个是事件名  第二个是参数
      this.$emit("exit", false);
    },
  },
};
</script>

<style lang='scss' scoped>
.box {
  margin: 200px auto;
  width: 400px;
  height: 200px;
  background-color: #d00;
  p {
    padding: 5px 10px;
    display: inline;
    float: right;
    background-color: #cdcdcd;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
  }
}
</style>

父组件

• 父组件代码如下

<template>
  <div class="home">
    <!-- 这边直接在点击事件里给show赋值为true 显示盒子 -->
    <button @click="show = true">点击打开</button>
    <!-- 子组件 v-show或者v-if判断值是否为true @exit是子组件传过来的事件 -->
    <comp-box v-show="show" @exit="click"></comp-box>
  </div>
</template>

<script>
import compBox from "@/components/compBox";
export default {
  name: "Home",
  data() {
    return {
      show: false,//定义一个值来控制盒子的显示与隐藏
    };
  },
  components: {
    compBox,
  },
  methods: {
    //关闭函数 参数是子组件传过来的
    click(item) {
      //直接把值赋给show
      this.show = item;
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  height: 100%;
}
</style>