如何聆听“道具”的变化

JavaScript

猿Itachi

2020-03-09

VueJs 2.0文档中,我找不到任何可以监听props更改的钩子

VueJ是否具有类似onPropsUpdated()或类似的钩子

更新资料

正如@wostex所建议的,我尝试进入watch我的财产,但没有任何变化。然后我意识到我有一个特殊情况:

<template>
    <child :my-prop="myProp"></child>
</template>

<script>
   export default {
      props: ['myProp']
   }
</script>

myProp将父组件接收到的child组件传递给了然后,watch: {myProp: ...}它不起作用。

第323篇《如何聆听“道具”的变化》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

4个回答
神无老丝Davaid 2020.03.09

监视功能应放在子组件中。不是父母。

古一泡芙小卤蛋 2020.03.09

如果myProp是对象,则通常不会更改它。因此,观看将永远不会被触发。之所以不能更改myProp的原因是,在大多数情况下,您只需设置myProp的某些键即可。myProp本身仍然是其中之一。尝试观看myProp的道具,例如“ myProp.a”,它应该可以工作。

樱小胖 2020.03.09

你尝试过这个吗?

watch: {
  myProp: {
    // the callback will be called immediately after the start of the observation
    immediate: true, 
    handler (val, oldVal) {
      // do your stuff
    }
  }
}

https://vuejs.org/v2/api/#watch

米亚JinJin樱 2020.03.09

他,

就我而言,我需要一个解决方案,只要任何道具都会发生变化,就需要再次解析我的数据。我已经厌倦了为所有道具制作单独的观察器,所以我使用了以下方法:

  watch: {
    $props: {
      handler() {
        this.parseData();
      },
      deep: true,
      immediate: true,
    },

该示例的重点是使用,deep: true因此它不仅监视$ props,而且还嵌套了诸如eg的值props.myProp

您可以在此处了解有关此扩展监视选项的更多信息:https : //vuejs.org/v2/api/#vm-watch

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android