手表没有按预期工作

Posted 2023-02-22

【中文标题】手表没有按预期工作

【英文标题】：Watch not working as expected

【发布时间】：2018-04-24 13:42:31

【问题描述】：

这里的问题很容易说明，我正在父组件上执行一个方法，它改变了我的对象products（也属于父data）的属性值，这工作正常.

但我将此对象作为道具传递给子组件并深入观察它alert('changed'); 永远不会执行：

Vue.component('child', 
	props: ['prods'],
  watch: 
  	prods: 
    	handler: function(new_val, old_val) 
      	alert('watched');
      ,
      deep: true
    
  
)

new Vue(
  el: '#app',
  template: '<div>products[0].value<br><button v-on:click="incre">increment prod 0</button></div>',
  data: 
  	products: [
    	id: 1, name: 'prod1', value: 20,
      id: 2, name: 'prod2', value: 40,
    ],
  ,
  methods: 
    incre: function() 
      this.products[0].value += 20;
    
  
)

<script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script>
<div id="app">
  <child v-bind:prods="products"></child>
</div>
https://jsfiddle.net/dmbgmxzh/6/

（更新）： 这有效：https://jsfiddle.net/dmbgmxzh/5/ 这不是：https://jsfiddle.net/dmbgmxzh/6/ 这很奇怪……

【问题讨论】：

不幸的是，它按预期工作。而deep: true 对数组来说是不必要的。

【参考方案1】：

作为替代方案，您可以将产品作为道具传递给您的子组件，分别查看每个产品。像这样：

Vue.component('child', 
    props: ['product'],
    watch: 
        product: 
            handler: function (new_val, old_val) 
                alert('watched');
            ,
            deep: true
        
    
)
new Vue(
    el: '#app',
    data: 
        products: [
            
                id: 1,
                name: 'prod1',
                value: 20
            ,
            
                id: 2,
                name: 'prod2',
                value: 40
            ,
    ],
    ,
    methods: 
        incre: function () 
            this.products[0].value += 20;
        
    
)

<script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script>
<div id="app">
    <div>products[0].value<br><button v-on:click="incre">increment prod 0</button></div>
    <child :product="product" v-for="product in products"></child>
</div>

另见this post。

【讨论】：

谢谢，但是我不想有几个childs，这个项目的孩子是谷歌地图，我只是改变它里面标记的纬度/经度（在本例为products 对象）

那么只需传入<child :product="products"></child>，它应该可以正常工作

这看起来很愚蠢，它是这样工作的：jsfiddle.net/dmbgmxzh/5。 Bur 无法以这种方式工作：jsfiddle.net/dmbgmxzh/6

解释一下为什么 OP 的代码不起作用会很好

从我在你的第二个小提琴（/6）中看到的你已经在你的 vue 实例中使用了一个模板，它会覆盖你的 html 内容，所以如果你想通过 html 定义渲染，我会建议你将它完全移动到 html 就像 jsfiddle.net/dmbgmxzh/7 或者如果它仍然不够好，也许使用 slots 会有所帮助