VueJS - 在 Ajax 之后更新父数据

Question

我正在尝试 VueJS，目的是逐步更新 jQuery 项目，但我在通过父组件传递数据的子组件中遇到道具问题。

我的父组件是

// parent_component.js
var parentData = {};
var parentComponent = Vue.component('parentComponent', {
    data: function() {
        return {
            parentData: _parentData
        }
    },
    delimiters: ['((', '))']
})

$.ajax({
   url: '/someUrl/',
   success: function(response) {
      _parentData = response
   }

我的子组件是：

// child_component.js
Vue.component('child-component', {
    template: '<div>((data.someProp))</div>'
    props: ['data'],
    delimiters: ['((', '))']
})

我的 HTML 是：

// index.html
<parent-component inline-template>
     <child-component v-bind:data="parentData"></child-component>
</parent-component>

当我在初始化 childComponent 后立即更新 _parentData 时，这一切都很好。但我实际上需要进行 Ajax 调用并更新 _parentData，它没有在 childComponent 中更新。
NB。我检查了 _parentData 对象是否存在于 Ajax 调用的回调中。
另外，我尝试将 Ajax 调用放在 childComponent 的 created 选项中，但这没有帮助。

我错过了什么？

更新

我想我犯了经典的初学者错误！如here、Vue cannot detect property addition 所述。因此，在进行异步调用之前，我需要在 _parentData 上定义 someProp 属性。

因此，如果我定义 var parentData = { someProp: '' }; 它将起作用。

看到这个小提琴：https://jsfiddle.net/maaikeb/anr1e88n/

Answer 1

如果您共享代码的 AJAX 部分，也许我可以提供更好的帮助，但恕我直言，我认为最简单的方法是 emiting 来自子级的事件，并在 AJAX 调用完成时用父元素捕获它（成功或错误）。

事件提供了一种方法来通知您的父组件子组件的变化。

模板用法：

<my-component v-on:myEvent="parentHandler"></my-component>
<!-- Or more succinctly, -->
<my-component @myEvent="parentHandler"></my-component>

触发事件：

...
export default {
  methods: {
    fireEvent() {
      this.$emit('myEvent', eventValueOne, eventValueTwo);
    }
  }
}

此外，您可以创建全局事件总线以在应用中的任何位置传递事件

提取自here。

编辑

好的，我不太了解你，如果在更新父级时将数据down 从父级发送到子级时遇到问题，正确的方法是双重数据绑定。

也许你的问题是 data 只在组件创建时被评估，而你的孩子将被创建为父组件的初始值......

您可以尝试一些不同的方法来解决这个问题，例如：

1 - 也许您的问题与更改检测有关 caveat

也许您正在对象中创建一个新属性...

 _parentData = response

...什么时候应该做...

_parentData.$set('someObject.someProperty', someValue)

2 - 在父级上使用watch 而不是created：

 watch:{ 
  yourData() {
        $.ajax({
            url: '/someUrl/',
            content_type: 'application/json',
            data_type: 'json',
            success: function(response) {
                 _parentData = response
            }
         })
  },

3 - 尝试使用.sync（在 2.0 中已弃用）：

<component :something.sync="variable"></component>

4 - 将 .this 绑定到匿名 AJAX 调用或使用 @Bert 评论的箭头函数：

success: () => (response) {
                 _parentData = response
            }

希望对你有帮助！