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，它返回一个包含timesUpdated属性的数组：

{
    timesUpdated: 5
}

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

代码适用于初始页面加载，times-updated组件可以检索其父{q} myData属性的值，但我确认vm.myData确实反映了来自API的新值，组件不会更新其显示以显示新计数。

我做错了什么？

Answer 1

数据功能仅在组件的生命周期中调用一次;最初创建时。所以基本上你的组件只显示组件创建时存在的值。

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

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

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

这是example。

Answer 2

仅在组件中需要回调

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

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

父进程的数据更改不会更新vuejs中的子组件

2 个答案: