父组件如何与Vue.js中的子组件通信?
问题描述:
这是我有:父组件如何与Vue.js中的子组件通信?
的outer
组件包含一个search-input
和menu
组件。
当用户执行的outer
部件上的搜索,我需要调用一个方法的menu
部件上,或发出一个事件,或任何的,只要我能向menu
组件通信说应该基于过滤器本身在新的标准。
我读过一些地方,调用儿童组件的方法是不鼓励,我应该使用事件。我现在正在查看docs,但我只能看到一个孩子与父母交谈的例子,而不是其他方式。
随着搜索条件的变化,我该如何与菜单组件通信?
编辑
据一些博客文章,曾经有一个$broadcast
方法意在交谈中的子组件,但关于刚刚消失的文档。这曾经是网址:http://vuejs.org/api/#vm-broadcast
答
约定是“props down, events up”。从父母通过道具子组件的数据流,所以你可以一个道具添加到菜单,也许:
<menu :items="menu" :searchTerm="searchTerm"></menu>
过滤系统(我猜这是一个计算的?)将基于searchTerm
,并会每当它改变时更新。
当组件系统变大时,将数据传递通过多层组件可能会很麻烦,并且通常使用某种中央存储。
答
或者您可以为此创建一种简单的商店。
首先,让我们创建名为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
这是澄清@Roy已被弃用。我来自React。问题:
将由于searchTerm变化而自动重新渲染? –是的,道具与数据项目一样具有反应性,所以Vue会根据情况重新渲染。 –