vue.js-如何在不使用this。$ parent […]的情況下通過父級數據更新來更新子級數據

Question

我正在邁出Vue.js的第一步，我非常喜歡它，但是遇到一個小問題，希望對解決這個問題有所幫助。

請在這里檢查我的小提琴： https : //jsfiddle.net/eywraw8t/8410/

我要實現的目的是將一些按鈕與其他按鈕關聯起來，目前，已經被硬編碼，但是，如果單擊“ settings on”按鈕，則“ setting1”和“ setting2”按鈕變為可見。 它按預期工作，但是當按鈕是否通過this.settings = true（可見）或false（不可見）時，我想讓Vue實例根目錄保存信息。 創建按鈕后，將對此按鈕進行檢查，並且按鈕是否可見（取決於this.settings值）。 但是，因為我使用：

  template: '<div @click="kalregClicker" class="button" :class="{isNotVisible : !this.$parent[this.type]}"><slot></slot> {{ status}} {{ !this.$parent[this.type]}}</div>',

每個更改根的this.settings都會導致按鈕可見性的更改，這很好。 但是我不知何故在各處都使用this。$ parent [this.type]很難看。 我更喜歡這樣的東西：

  template: '<div @click="kalregClicker" class="button" :class="{isNotVisible : !status}"><slot></slot> {{ status }} {{ !this.$parent[this.type]}}</div>',

要么

  template: '<div @click="kalregClicker" class="button" :class="{isNotVisible : checkVisibility()}"><slot></slot> {{ status }} {{ !this.$parent[this.type]}}</div>',

並且checkVisibilty看起來像這樣：

function () {
   this.status = this.$parent[this.type];
   return this.status;
}

..但它不起作用。 問題是：如何將根的this.settings更新為true / false以影響組件的this.status，以便在不使用this。$ parent的情況下更改組件的外觀和行為。$ parent [...]我希望我自己弄清楚:) Kalreg。

Answer 1

您應該使status本身成為計算屬性。

從data聲明中刪除它，然后執行以下操作：

computed: {
 status() { return this.$parent[this.type] == undefined ? true : this.$parent[this.type]; }
}

您可以像這樣使用它：

:class="{isNotVisible : !status}"

JSFiddle在這里 。