为什么更新父组件的非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' 吗? 怎么加了个大括号干嘛

1个月前 评论
yanyin (楼主) 1个月前
qingshui (作者) 1个月前
yanyin (楼主) 1个月前
qingshui (作者) 1个月前
yanyin (楼主) 1个月前
qingshui (作者) 1个月前
yanyin (楼主) 1个月前
qingshui (作者) 1个月前
yanyin (楼主) 1个月前
qingshui (作者) 1个月前
yanyin (楼主) 1个月前
讨论数量: 12

父组件给子组件传递 test 属性的时候, 不应该是这样写的吗? :test='test' 吗? 怎么加了个大括号干嘛

1个月前 评论
yanyin (楼主) 1个月前
qingshui (作者) 1个月前
yanyin (楼主) 1个月前
qingshui (作者) 1个月前
yanyin (楼主) 1个月前
qingshui (作者) 1个月前
yanyin (楼主) 1个月前
qingshui (作者) 1个月前
yanyin (楼主) 1个月前
qingshui (作者) 1个月前
yanyin (楼主) 1个月前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!