如何监听“道具”的变化
如何监听“道具”的变化
提问于 2017-06-16 16:19:59
在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: ...}就不工作了。
回答 17
Stack Overflow用户
回答已采纳
发布于 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>
Stack Overflow用户
发布于 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
}
}
}Stack Overflow用户
发布于 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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44584292
复制相关文章
相似问题
腾讯云开发者
