vuejs中父组件数据变化不更新子组件

Question

我有以下内容：

Vue.component('times-updated', {
    template: '<span>Times Updated: {{ timesUpdated }}</span>',
    data: function() {
        return {
            timesUpdated: this.$parent.myData.timesUpdated
        }
    }
});


var vm = new Vue({
    el: '#test',
    data: function() {
        return {
            myData: {}
        }
    }
})

setInterval(function(){
    $.ajax({
        url: `${window.location.href}/json`, // This just returns an array : array.timesUpdated: 2 etc
    }).done(function (data) {
        vm.myData = data; // changes this data
    });
}, 1000)

并且正在使用以下 html：

<div class="test">  
    <times-updated></times-updated>
</div>

我轮询一个 REST API returns 一个包含 timesUpdated 的数组属性:

{
    timesUpdated: 5
}

我的意图是每一秒我使用jQuery的$.ajax方法调用API，更新vm上的myData数据对象，然后将更新 times-updated 组件。

该代码在初始页面加载时有效，times-updated 组件可以检索其父级 myData 属性上的值，但虽然我已经确认 vm.myData 确实如此反映来自 API 的新值，组件不会更新其显示以显示新计数。

我做错了什么？

Answer 1

只有组件需要回调

    // vue instance
    new Vue({
        data: {
            status: true
        }
    };

    // vue components (callback)
    Vue.component('custom-component', {
        data: function() {
            return {
                status: false
            }
        }
    });

Answer 2

数据函数在组件的生命周期内只被调用一次；最初创建时。所以本质上，您的组件只是显示创建组件时存在的值。

此外，从组件中伸出手来获取数据值通常是一种不好的做法。 Vue 是 props down, events up。您应该将组件转换为使用属性.

Vue.component('times-updated', {
  props:["times"],
  template: '<span>Times Updated: {{ times }}</span>',
})

在这种特殊情况下，您使用函数来定义 Vue 的事实并不重要，这不是典型的做法。组件需要一个函数，因为它们需要一个独立的作用域。

这是一个example。

vuejs中父组件数据变化不更新子组件

Parent's data change does not update child component in vuejs

javascript

vue.js

vue-component