如何查看組件內的Vue實例屬性？

我有一個插件，添加一些屬性Vue實例。
然後我可以使用this.$plugin.prop訪問組件內的這個屬性。我怎樣才能觀察其變化？我需要根據this.$plugin.prop值在組件內部執行某些操作，但watch或this.$watch都不適用於我。我認爲在組件上下文的，因爲watch的作品，所以我不能觀看變量的外部元件，例如如何查看組件內的Vue實例屬性？

mounted() { 
     this.$watch('$plugin.prop', val => console.log(val)); 
    }

不起作用。
完成此操作的正確方法是什麼？

來源

2017-07-27 user0103

你可以嘗試存儲在插件組件的數據模型道具引用，然後從部件數據模型看，物業 - http://jsbin.com/kopucayoro/edit ？html，js，輸出 –

您可以使用計算的屬性，而不是像這樣：

computed: { 
    pluginChanged() { 
     console.log(this.$plugin.prop.val); 
     return this.$plugin.prop.val; 
    }

瞭解更多關於計算性能here。

來源

2017-07-27 11:41:11 ironcladgeek

我不知道，但它不適用於組件以外的數據。適用於組件內部的數據。 – user0103

取決於你如何設計自定義'插件'！你使用[vuex]（https://vuex.vuejs.org/en/）嗎？如果不是，那麼你應該考慮Vue只監視'data'選項。換句話說，只有'data'模型是被動的。如前所述，您可以使用Vuex庫或將數據存儲在組件的「數據」模型中。 @MaxStern – ironcladgeek

哦，現在有道理，我錯過了這部分內容，只關注'數據'被動。 – user0103

而不是mounted()嘗試

watch: { 
    '$plugin.prop': function(value){ 
     console.log(value); 
    } 
}

來源

2017-07-27 14:01:56

如何查看組件內的Vue實例屬性？

回答

相關問題