自己造messagebox轮子

最新推荐文章于 2024-11-07 19:48:34 发布

weixin_58689699

最新推荐文章于 2024-11-07 19:48:34 发布

阅读量468

点赞数 9

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_58689699/article/details/135629989

版权

这篇文章详细描述了在Vue.js中，如何在父组件和子组件之间实现数据传递，通过props将`alertBox`状态从父组件传递到子组件，并通过自定义事件进行双向更新。

摘要由CSDN通过智能技术生成

父组件中：

import floatBox from '../messageBox'

data里加参数alertBox: '0',

method中

changeAlertBox() {

      if (this.alertBox === '0') {

        this.alertBox = '1'

        this.$refs.floatBox.changeAlertBox()

      } else {

        this.alertBox = '0'

        this.$refs.floatBox.changeAlertBox()

      }

      console.log('父组件中的', this.alertBox)

    },

    changeFatherBox() {

      if (this.alertBox === '0') {

        this.alertBox = '1'

      } else {

        this.alertBox = '0'

      }

    }

 components: {
    floatBox
  }

import floatBox from '../messageBox'

<floatBox ref="floatBox" :alertBox="changeChildBox"></floatBox>

子组件中：

<template>
  <div v-if="alertBox === '1'" class="alert_box" @click="hidden">
    <div @click.stop="" class="contentBox">
      <div class="title">
        <div>培训审批</div>
        <div @click="changeAlertBox">×</div>
      </div>
      <div class="text">请选择是否同意</div>
      <div class="btn">
        <el-button type="primary">同意报名</el-button>
        <el-button type="primary" plain>不同意报名</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: { alertBox: { type: String, default: '0' } },
  methods: {
    hidden() {
      this.alertBox = '0'
    },
    changeAlertBox() {
      if (this.alertBox === '0') {
        this.alertBox = '1'
        this.$emit('alertBox', this.alertBox)
      } else {
        this.alertBox = '0'
        this.$emit('alertBox', this.alertBox)
      }
      console.log('子组件中的', this.alertBox)
    }
  },
  created() {}
}
</script>

<style lang="less" scoped>
.alert_box {
  position: fixed;
  z-index: 2002;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(128, 128, 128, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  .contentBox {
    width: 600px;
    height: 200px;
    background: #ffffff;
    box-shadow: 0 5px 5px -3px #0000001a, 0 8px 10px 1px #0000000f,
      0 3px 14px 2px #0000000d;
    .title {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      height: 56px;
      background: #ffffff;
      padding: 0px 14px;
      font-weight: 600;
      font-size: 16px;
      color: #000000e6;
      line-height: 24px;
      border-bottom: 1px solid #e7e7e7;
    }
    .text {
      display: flex;
      flex-direction: row;
      padding: 0px 15px;
      align-items: center;
      height: 86px;
      font-weight: 400;
      font-size: 16px;
      color: #000000e6;
      border-bottom: 1px solid #e7e7e7;
    }
    .btn {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      width: 600px;
      height: 56px;
    }
  }
}
</style>