Question

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

但是我将这个对象作为一个道具传递给一个子组件并深入地观察它＆lt; - 这是失败的，因为你可以看到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/
这很奇怪......

Answer 1

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

＆＃13;

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;
        }
    }
})

＆＃13;

<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>

＆＃13;

另见this post。

注意不按预期工作

1 个答案: