我在Vue中有一个子组件。我还将Vuex用作一些值。
当我单击父组件中的某些内容时,应触发子组件。为此,我向子组件发送了active
(布尔)作为道具。
在updated
方法中,我执行触发组件时需要做的事情。
问题
为了触发updated
,我需要向模板中添加active
。否则它不会被触发。因此,我现在真正真正的解决方案是使用v-show="!active || active"
,它表示“始终显示div”。
如何在没有此类黑客的情况下触发组件?我的模板中不需要active
值。
完成子组件
Vue.component('p-inline-readonly', {
mixins: [ table_mixin ],
props: {
value: [ String, Number ],
active: Boolean
},
updated() {
this.reset();
this.refocus();
},
template: /*html*/ `
<div class="slot p-inline-readonly">
<div class="presentation" v-show="!active || active">
{{value}}
</div>
</div>
`
});
答案 0 :(得分:2)
您可以观看active
并触发更新:
watch: {
active: function(val, oldVal) {
this.$forceUpdate();
},
}
您还可以向子组件添加密钥:
<p-inline-readonly :key="active" ... >
这将使组件在活动更改时重新呈现,但不会调用updated
钩子,因此您需要将其逻辑移至其他钩子,例如mounted