首页 新闻 会员 周边

vue监听为啥能监听true/false,监听不到数字

0
[已解决问题] 解决于 2022-05-07 09:42
  • 我想写一个倒计时的公共弹窗,很多页面复用,父组件props传个数字,子组件根据数字倒计时
  • 现在子组件传过来的秒数监听不到
    父组件
<template>
  <div>
    父组件
    <Dialog
      :dialogVisible="dialog.dialogVisible"
      :count="dialog.mycount"
      :msg="dialog.msg"
    ></Dialog>
    <button @click="dialog.dialogVisible=true">click</button>
  </div>
</template>

<script>
import Dialog from '@/components/common/Dialog.vue'
export default {
  components: { Dialog },
  data() {
    return {
        dialog: {
        dialogVisible: false, //弹窗开关
        mycount: 20, //弹窗倒计时
        msg:'保存成功1515'
      },
    }
  },
  created() {},
  mounted() {},
  methods: {},
}
</script>

<style scoped lang="less">
</style>

子组件Dialog.vue

<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="options.showClose"
      :visible.sync="dialogVisible"
      :width="options.width"
      center
    >
      <div class="dialog_content">
        <img
          v-if="options.showImg"
          class="loading_img"
          src="@/static/image/loadding.png"
          alt=""
        />
        <div>{{ msg }}</div>
        <div>请稍等...{{ number}}s</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="options.showCancelBtn" @click="onCancel"
          >取 消</el-button
        >
        <el-button
          v-if="options.showconfirmBtn"
          type="primary"
          @click="onConfirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    dialogVisible: { type: Boolean, default: false },
    options: {
      type: Object,
      default: () => {
        return {
          showClose: false,
          showCancelBtn: false,
          showconfirmBtn: false,
          showImg: true,
          width: '20%',
        }
      },
    },
    count: { type: Number, default: 0 },
    msg: { type: String, msg: '' },
  },
  data() {
    return {
      number: 0,
    }
  },
  watch: {
    count(newVal, oldVal) {
// -----这里监听不到
      console.log('哈哈-count监听', newVal, oldVal);
      this.number = newVal
    },
    dialogVisible(newVal, oldVal) {
      console.log('哈哈-dialogVisible监听');
      if (!this.options.showconfirmBtn) {
        this.startCountDown()
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    startCountDown() {
      const that = this
      const interval = window.setInterval(function () {
        if (that.number <= 0) {
          window.clearInterval(interval)
          that.$emit('closeDiolog', that.number)
          // that.$emit("closeDialog", false);
        }
        --that.number
      }, 1000)
    },
    onCancel() {
      // 官方推荐用烤串命名法
      this.$emit('on-cancel')
    },
    onConfirm() {
      this.$emit('on-confirm')
    },
  },
}
</script>

<style scoped lang="less">
.loading_img {
  //   transition: 0.5s;
  //   transform-origin: 30px 30px;
  animation: rotate 1s linear infinite;
}
.dialog_content {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
</style>

  • 数字的监听的打印没有
要跑啊的主页 要跑啊 | 初学一级 | 园豆:196
提问于:2022-05-06 20:57
< >
分享
最佳答案
0

...我记得是变化值都会监听,不会只监听布尔,不监听数字,
除非你的数据变更时并没有触发到vue的监听机制,
比如有的时候需要深度监听,不然监听不到
https://blog.csdn.net/qq_37288563/article/details/114699819
这个可以看一下

奖励园豆:5
人间春风意 | 老鸟四级 |园豆:2370 | 2022-05-07 08:47
其他回答(1)
1
  • 虽然不知道原理
  • 我以为监听,子组件有个默认值,父组件props传值会触发watch,实际不会
  • 正确的是,在父组件要传的值给个默认值,mycount为0点击后改变,会触发
data() {
    return {
        dialog: {
        dialogVisible: false, //弹窗开关
        mycount: 0, //弹窗倒计时
        msg:'保存成功1515'
      }

然后点击改变会触发<button @click="dialog.dialogVisible=true; dialog.mycount = 20">click</button>

watch: {
...
    dialogVisible(newVal, oldVal) {
     ...
    },
//新增了这个,也是监听不到的
    msg() {
      console.log('msg -watch');
    }
  },
要跑啊 | 园豆:196 (初学一级) | 2022-05-07 09:35

deep:true

支持(0) 反对(0) 陈大仙zs | 园豆:200 (初学一级) | 2024-03-12 15:52
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册