Vue组件只有在模板中的值

时间:2019-06-26 08:36:48

标签: javascript vue.js

我在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>
  `
});

1 个答案:

答案 0 :(得分:2)

您可以观看active并触发更新:

watch: {
    active: function(val, oldVal) {
      this.$forceUpdate();
    },
}

您还可以向子组件添加密钥:

<p-inline-readonly :key="active" ... >

这将使组件在活动更改时重新呈现,但不会调用updated钩子,因此您需要将其逻辑移至其他钩子,例如mounted