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>
- 数字的监听的打印没有
最佳答案
0
...我记得是变化值都会监听，不会只监听布尔，不监听数字，
除非你的数据变更时并没有触发到vue的监听机制，
比如有的时候需要深度监听，不然监听不到
https://blog.csdn.net/qq_37288563/article/details/114699819
这个可以看一下
奖励园豆：5
其他回答(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');
}
},
deep:true
