Question

$ watch能听Vue.js中的道具吗？

我在实验室测试，发现我看不到道具：

在我的index.vue中：

<test-com :data="pass_data"></test-com> 

...

export default {

  data(){
    return {
      pass_data: {a:'a', b:'b'}
      ...
    }
  }

  methods: {
    add_select_data(){
      this.pass_data.c = 'c'
      console.log('add c')   // there add the `c`
    }
  }

我在index.vue中有一个按钮来调用add_select_data。

在<test-com>

中

<script>

  export default{
    props: {
      pass_data: {
        type: Object,
        required: true
      }
    }
    ,
    data(){
      return {
        msg: 'hello vue',
        edit_form_data: {}
      }
    },
    components: {},
    watch:{
      pass_data(new_obj, old_obj) {
        console.log(new_obj, 'ok')
      }
    }
  }
</script>

我试着看pass_data，但我觉得我不能。

有些朋友可以告诉我如何存档吗？

Answer 1

向观察者添加deep: true选项，以观察对象嵌套值的变化，如下所示

watch:{
  pass_data:{
    deep: true,
    handler: function(new_obj, old_obj) {
      console.log(new_obj, 'ok')
    }
   }
}

但是要添加新的反应属性并希望手表触发，您应该使用vm.$set()。请参阅Reactivity in depth

add_select_data(){
  this.$set(this.pass_data, 'c' , 'c');
  console.log('add c')   // there add the `c`
}

这里fiddle演示了上面的例子

Answer 2

如果您希望数据被反应以观看新属性，请使用此语法将其设置为this.$set(this.pass_data, 'c', 'c')，这样就应该触发更改事件。否则，您可以通过更改this.pass_data.b = 'asd'

来测试是否监视道具

https://vuejs.org/v2/guide/reactivity.html

要回答您的问题，可以像普通数据属性一样观看道具

$ watch能听Vue.js中的道具吗？

2 个答案: