在VueJs 2.0文档中,我找不到任何可以监听道具变化的钩子。
VueJs有这样的钩子像onpropsupdate()或类似的吗?
更新
正如@wostex建议的那样,我试着观察我的财产,但没有任何变化。然后我意识到我遇到了一个特殊的情况:
<template>
<child :my-prop="myProp"></child>
</template>
<script>
export default {
props: ['myProp']
}
</script>
我将父组件接收到的myProp传递给子组件。然后手表:{myProp:…不起作用。
对于双向绑定,你必须使用.sync修饰符
<child :myprop.sync="text"></child>
更多细节…
你必须在子组件中使用watch属性来监听和更新任何更改
props: ['myprop'],
watch: {
myprop: function(newVal, oldVal) { // watch it
console.log('Prop changed: ', newVal, ' | was: ', oldVal)
}
}
我认为在大多数情况下,Vue会在道具变化时更新组件的DOM。
如果这是你的情况,那么你可以使用beforeUpdate()或updated()钩子(docs)来观察道具。
如果你只对新val感兴趣而不需要旧val,你可以这样做
new Vue({
el: '#app',
data: {
text: ''
},
components: {
'child': {
template: `<p>{{ myprop }}</p>`,
props: ['myprop'],
beforeUpdate() {
console.log(this.myprop)
},
updated() {
console.log(this.myprop)
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<child :myprop="text"></child>
<input v-model="text" placeholder="Type here to view prop changes" style="width:20em">
</div>