vue父组件向子组件传值只一次生效

vue开发过程中，父组件做一个按钮，点击弹出子组件的设置框，结果在父组件传值给子组件时，只有一次生效执行！刷新页面过后又可以。再次点击就失效。经过查询才发现问题原因

vue父组件向子组件传递相同的值只一次执行

父组件部分代码

export default {
    name: "home",
	data() {
        return {
            pageSet: {
                state: true,
                key: ''
            }
		}
	},
	methods: {
		showPageSet() {
			this.pageSet.state = true
			this.pageSet.key = new Date().getTime()
		}
	}
}

子组件部分代码

export default {
    name: "templateInfo",
    props: {
        pageSet: {
            type: Object,
            default: () => false
        }
    },
	data() {
        return {
            pageState: false
		}
	},
    watch: {
        pageSet: {
            handler(newData) {
                this.pageState = newData.state
            },
            deep: true,
        }
    }
}

原因：是因为vue父组件传值给子组件，使用watch监听处理时，因为前一次跟本次传值的一样，监听的属性因为没有新的变化就会导致对应的数据也没有变化，所以导致失效。

解决：在传值时添加一个动态的值，例如定义一个动态时间的 key。

另外我们也可以使用ref，$emit，$on等方式来处理。

来源：vue父组件向子组件传递相同的值只有一次生效执行