从 vue watcher 访问组件实例

Posted 2023-02-23

【中文标题】从 vue watcher 访问组件实例

【英文标题】：Access component instance from vue watcher

【发布时间】：2018-09-08 19:45:32

【问题描述】：

我正在做一个项目，类似于账单经理，所以我希望每次数量或单位值发生变化时都重新计算小计，我尝试并搜索使用观察器或计算属性来完成此操作，但我找不到正确的方法，因为当另一个更改时，我需要访问元素的整个范围，像这样。

模型结构：

详情 数量 单位价值 小计（应该是计算的或更新的）

所以我认为我应该能够做这样的事情：

    Vue.component('item', 
    template: '#item',
    props: 
      item: Object,
    ,
    computed:
        total: function() 
            return this.quantity*this.unit_value;
         
    ,
    watch:
      'item.quantity':()=>
        this.subtotal = this.quantity*this.unit_value;
      
    
  );

我从一个列表中读取了几个组件

我使用 watcher 合并了该方法，并在相同的代码中计算以使其更短。

问题是我还没有找到从内部访问孔元素的方法，任何人都可以解释正确的方法吗？谢谢

【问题讨论】：

"我还没有找到从内部访问孔元素的方法，" .. 你这是什么意思？你想访问什么以及在哪里

【参考方案1】：

你不应该在那里使用箭头函数，使用方法声明。

如果您想监视 item 对象的属性，则必须监视 item 对象本身，并另外使用监视程序的 deep: true 标志。

最后的细节，你正在使用几个没有在你的data 中声明的属性。声明它们，否则它们不会是响应式的，即当它们发生变化时计算不会重新计算。

见代码：

Vue.component('item', 
  template: '#item',
  props: 
    item: Object,
  ,
  data() 
    return 
      subtotal: null,         // added data properties
      quantity: null,
      unit_value: null
    
  ,
  computed: 
    total: function() 
      return this.quantity * this.unit_value;
    
  ,
  watch: 
    item:                           // watching for item now
      deep: true,                    // using deep: true
      handler()                     // and NOT using arrow functions
        this.subtotal = this.quantity * this.unit_value;
      
    
  
);

【讨论】：

感谢您的回复。我将其修改为这种方式，当我更改某些属性时，观察者甚至不会触发：/