Question

我有一个插件，可以为Vue实例添加一些属性然后我可以使用TestClass() { setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setBounds(100, 100, 513, 438); contentPane = new JPanel(); contentPane.setLayout(new BorderLayout()); JButton b1 = new JButton("hello"); JPanel panel = new JPanel(new BorderLayout()); //panel.setBounds(10, 10, 477, 193); panel.add(b1, BorderLayout.CENTER); contentPane.add(panel, BorderLayout.EAST); //panel.setLayout(null); JButton b2 = new JButton("why"); JPanel panel_1 = new JPanel(new BorderLayout()); //panel_1.setBounds(10, 214, 477, 174); panel_1.add(b2, BorderLayout.CENTER); contentPane.add(panel_1, BorderLayout.WEST); //panel_1.setLayout(null); this.getContentPane().add(contentPane); }在组件内访问此属性。我该如何看待它的变化？我需要根据this.$plugin.prop值在组件内部执行某些操作，但this.$plugin.prop或watch都不适用于我。我假设它是因为this.$watch在组件上下文中工作，所以我不能监视变量外部组件，例如

watch

不起作用。
什么是实现这一目标的正确方法？

Answer 1

而不是mounted()尝试

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

Vue docs

中关于观察者的官方文档

Answer 2

您可以使用计算属性，如下所示：

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

详细了解计算属性here。

如何在组件内部观察Vue实例属性？

2 个答案: