炫意html5
最早CSS3和HTML5移动技术网站之一

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

  • 我想写一个倒计时的公共弹窗,很多页面复用,父组件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>
<img
v-if="options.showImg"
class="loading_img"
src="https://q.cnblogs.com/q/139749/@/static/image/loadding.png"
alt=""
/>
<div>{{ msg }}</div>
<div>请稍等...{{ number}}s</div>
</div>
<span slot="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>
  • 数字的监听的打印没有

回答

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

炫意HTML5 » vue监听为啥能监听true/false,监听不到数字

Java基础教程Android基础教程