如何聆听“道具”的变化

javascript vue.js vue-component vuejs2

2022-08-29 23:18:08

在 VueJs 2.0 文档中，我找不到任何可以侦听更改的钩子。props

VueJs有类似或类似的钩子吗？onPropsUpdated()

更新

正如@wostex建议的那样，我试图去我的财产，但没有任何变化。然后我意识到我有一个特例：watch

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

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

我正在将父组件接收传递给组件。然后不起作用。myPropchildwatch: {myProp: ...}

答案 1

你可以在 props 更改时执行一些代码：watch

new Vue({
  el: '#app',
  data: {
    text: 'Hello'
  },
  components: {
    'child' : {
      template: `<p>{{ myprop }}</p>`,
      props: ['myprop'],
      watch: { 
      	myprop: function(newVal, oldVal) { // watch it
          console.log('Prop changed: ', newVal, ' | was: ', oldVal)
        }
      }
    }
  }
});

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <child :myprop="text"></child>
  <button @click="text = 'Another text'">Change text</button>
</div>

答案 2

你试过这个吗？

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

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