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中更新铌。我检查了_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 }

希望它有所帮助！

VueJS - 在Ajax之后更新父数据

1 个答案: