父组件如何与Vue.js中的子组件通信?

父组件如何与Vue.js中的子组件通信?

问题描述:

这是我有:父组件如何与Vue.js中的子组件通信?

​​

outer组件包含一个search-inputmenu组件。

当用户执行的outer部件上的搜索,我需要调用一个方法的menu部件上,或发出一个事件,或任何的,只要我能向menu组件通信说应该基于过滤器本身在新的标准。

我读过一些地方,调用儿童组件的方法是不鼓励,我应该使用事件。我现在正在查看docs,但我只能看到一个孩子与父母交谈的例子,而不是其他方式。

随着搜索条件的变化,我该如何与菜单组件通信?

编辑

据一些博客文章,曾经有一个$broadcast方法意在交谈中的子组件,但关于刚刚消失的文档。这曾经是网址:http://vuejs.org/api/#vm-broadcast

约定是“props down, events up”。从父母通过道具子组件的数据流,所以你可以一个道具添加到菜单,也许:

<menu :items="menu" :searchTerm="searchTerm"></menu> 

过滤系统(我猜这是一个计算的?)将基于searchTerm,并会每当它改变时更新。

当组件系统变大时,将数据传递通过多层组件可能会很麻烦,并且通常使用某种中央存储。

+0

这是澄清@Roy已被弃用。我来自React。问题:

将由于searchTerm变化而自动重新渲染? –
+0

是的,道具与数据项目一样具有反应性,所以Vue会根据情况重新渲染。 –

是的,$broadcast在2.x中已弃用。有关替换功能(包括事件集线器或Vuex)的一些想法,请参阅Migration guide

或者您可以为此创建一种简单的商店。

首先,让我们创建名为searchStore的新文件。JS它只是VanillaJS对象

export default { 

    searchStore: { 
     searchTerm: '' 
    } 


} 

然后在文件你在哪里使用这个商店,你必须将其导入

import Store from '../storedir/searchStore' 

然后在你的组件,你想过滤数据,你应创建新的数据对象

data() { 
    return { 
     shared: Store.searchStore 
    } 
} 

关于方法 - 你可以把方法在你的店,这样

doFilter(param) { 
    // Do some logic here 
} 

随后又在你的组件,你可以这样调用

methods: { 
    search() { 
     Store.doFilter(param) 
    } 
} 

而且你是正确的$广播和$派遣VueJS 2.0