在VueJs 2.0 docs中,我找不到任何监听props
更改的钩子。
VueJs有像onPropsUpdated()
或类似的钩子吗?
更新
正如@wostex建议的那样,我尝试watch
我的属性,但是什么都没有改变。然后我意识到我有一个特例:
<template>
<child :my-prop="myProp"></child>
</template>
<script>
export default {
props: ['myProp']
}
</script>
我将父组件接收到的myProp
传递给child
组件。那么watch: {myProp: ...}
就不工作了。
发布于 2017-06-16 16:27:12
你可以通过watch
props来在props改变时执行一些代码:
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>
发布于 2018-07-04 22:46:25
你试过这个吗?
watch: {
myProp: {
// the callback will be called immediately after the start of the observation
immediate: true,
handler (val, oldVal) {
// do your stuff
}
}
}
发布于 2018-08-01 04:29:16
在我的例子中,我需要一种解决方案,无论何时任何道具发生变化,我都需要再次解析我的数据。我厌倦了为我所有的道具创建独立的监视器,所以我使用了这个:
watch: {
$props: {
handler() {
this.parseData();
},
deep: true,
immediate: true,
},
},
本例的关键点是使用deep: true
,这样它不仅可以监视$props
,还可以监视像props.myProp
这样的嵌套值
您可以在此处了解有关此扩展监视选项的更多信息:https://vuejs.org/v2/api/#vm-watch
https://stackoverflow.com/questions/44584292
复制相似问题