Vue.js 从VueJS组件共享数据

我有一个VueJS地址查找组件

Vue.component('address-lookup',
{
    template: '#address-lookup-template',
    data: function()
    {
        return {
            address: {'name': '', 'town:': '', 'postcode': ''},
            errors: {'name': false, 'town': false, 'postcode': false},
            states: {'busy': false, 'found': false},
            result: {}
        }
    },
    methods:
    {
        findAddress: function(event)
        {
            if( typeof event === 'object' && typeof event.target === 'object' )
            {
                event.target.blur();
            }

            $.ajax(
            {
                context: this,
                url: '/lookup',
                data:
                {
                    'name':     this.address.name,
                    'town':     this.address.town,
                    'postcode': this.address.postcode
                },
                success: function(data)
                {
                    this.states.busy = false;
                    this.states.found = true;
                    this.address.name = data.name;
                    this.result = data;
                }
            });
        },
        reset: function()
        {
            this.states.found = false;
            this.result = {};
        }
    }
});

在我的模板中，我将结果绑定如下：

<p>{{ result.formatted_address }}</p>

这是有道理的<代码>查找结果在包含模板时定义，编辑时删除此行：

<address-lookup v-ref:lookup-result></address-lookup>

我已经解决了这个问题，在没有

v-model

属性的情况下添加了每个额外输入的版本，再次使用了服务器端

if

。但有相当多的这些，它变得有点混乱

---

有没有更干净的方法可以更好地实现这一点？

因此我不知道布局的层次结构，上面没有说明，但假设地址查找组件是父级的子级，并且您实际上需要该父级中的地址查找结果，例如：

<parent-component> <!-- where you need the data -->
  <address-lookup></address-lookup> <!-- where you lookup the data -->
</parent-component>

然后，您只需通过定义“地址”（例如在您父母的vue数据挂钩上）来传递数据道具，可以是自顶向下（默认）传递，也可以是双向传递：

// parent's data() function
data = function () { 
  return { 
    address: {} 
  }
}

// parent template, passed address with .sync modifier (to make it bi-directional)
<parent-component>
  <address-lookup :address.sync='address'></address-lookup>
</parent-component>

// have the props accepted in the address look up component
var addressComponent = Vue.extend({
  props: ['address']
})

//父级的data（）函数
数据=函数（）{
返回{
地址：{}
}
}
//父模板，使用.sync修饰符传递地址（使其双向）
//在地址查找组件中接受道具
var addressComponent=Vue.extend({
道具：[“地址”]
})

---

现在，在$.ajax success函数中，只需在

this.address

上设置所需的道具即可。当然，您可以使用所需的所有道具来执行此操作：错误、结果、状态等。更好的是，如果您可以将它们嵌套到父对象上的单个键中，您可以为包含所有四个元素的对象传递单个键，而不是单独传递所有四个元素

我实际上没有父组件。父应用程序只是应用程序的根应用程序。但是大概我可以使用根数据建立相同的连接？我试图避免总是定义它，因为它似乎不必要，因为该组件只在其他几个页面中的一个表单上使用，所有其他页面都使用相同的VueJS代码。是的，同样的概念适用，只需将我的

父组件

替换为应用程序的根，根就像其他任何页面一样是有效的父组件。

<parent-component> <!-- where you need the data -->
  <address-lookup></address-lookup> <!-- where you lookup the data -->
</parent-component>

// parent's data() function
data = function () { 
  return { 
    address: {} 
  }
}

// parent template, passed address with .sync modifier (to make it bi-directional)
<parent-component>
  <address-lookup :address.sync='address'></address-lookup>
</parent-component>

// have the props accepted in the address look up component
var addressComponent = Vue.extend({
  props: ['address']
})