VueJS 2.0 - 无法在道具更新上挂钩组件 [英] VueJS 2.0 - Can't hook a component on props update
问题描述
我需要在更新时强制重新渲染组件才能调用 FB.XFBML.parse().但是，无论我做什么，当属性更新时，我都无法调用任何生命周期钩子 beforeUpdate/updated.(根据 docs，它只监听 dataprops 显然不是).
<div>{{myProp}}</模板><脚本>导出默认{道具:['myProp']，手表: {myprop: function(newVal, oldVal) {//观察它console.log('Prop 改变了:', newVal, ' | was: ', oldVal)}},updated(){//从未被调用},beforeUpdate(){//从未调用过 }}
我可以看到属性 channel 在从父组件发送不同的值时发生了变化.
有没有监听props变化的钩子?
更新
正如@chris 所建议的，我试图watch 我的财产，但没有任何改变.然后我意识到我有一个特殊情况:
<child :my-prop="myProp"></child></模板><脚本>导出默认{道具:['myProp']}我将父组件接收到的 myProp 传递给 child 组件.然后 watch: {myProp: ...} 不起作用.
您要找的是 观看:
I need to force re-render component on update to be able to call FB.XFBML.parse(). However, no matter what I do I am not able to invoke any lifecycle hook beforeUpdate/updated when a property updated. (According to docs it only listens for data updates which props obviously aren't).
<template>
<div>
{{myProp}}
</div>
</template>
<script>
export default {
props: ['myProp'],
watch: {
myprop: function(newVal, oldVal) { // watch it
console.log('Prop changed: ', newVal, ' | was: ', oldVal)
}
},
updated(){ // never invoked},
beforeUpdate(){ // never invoked }
}
</script>
I can see that the property channel changed when sending different values from a parent component.
Is there a hook to listen for props changes?
Update
As @chris suggested, I tried to watch my property but nothing changed. Then I realized that I've got a special case:
<template>
<child :my-prop="myProp"></child>
</template>
<script>
export default {
props: ['myProp']
}
</script>
I am passing myProp that the parent component receives to the child component. Then the watch: {myProp: ...} is not working.
What you're looking for is watch:
<script>
export default {
props: ['channel'],
watch: {
channel(newValue) {
console.log(newValue)
}
}
}
</script>
这篇关于VueJS 2.0 - 无法在道具更新上挂钩组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
