为什么更新父组件的非props属性,子组件 props watch 会触发?
父组件
<template>
<div>
<Child
:test="{ test }"
>
</Child>
{{ anotherTest }}
</div>
</template>
<script>
import Child from "@/components/Child"
export default {
name: 'Father',
components: {
Child,
},
data() {
return {
test: {},
anotherTest: '',
}
},
watch: {
test(newTest, oldTest) {
console.log('Father test changed')
}
},
created() {
setTimeout(()=> this.anotherTest = '123', 1000)
},
}
</script>
子组件
<template>
<div>{{ test }}</div>
</template>
<script>
export default {
name: "Child",
props: {
test: {
type: Object,
default: () => {},
},
},
watch: {
test(newTest, OldTest) {
console.log('Child test changed')
console.log(newTest)
console.log(OldTest)
}
}
}
</script>
打印结果 Child test changed
这是什么原因?
父组件给子组件传递
test
属性的时候, 不应该是这样写的吗?:test='test'
吗? 怎么加了个大括号干嘛