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

Question

这就是我所拥有的：

<div id='vnav-container'>
    <input type="text" v-model="searchTerm" v-on:keyup="search" class="vnav-input">
    <menu :items="menu"></menu>
</div>

outer组件包含search-input和menu组件。

当用户在outer组件上执行搜索时，我需要在menu组件上调用方法，或发出事件或其他任何内容，只要我可以与{ {1}}组件说它应该根据新标准过滤自己。

我已经在某处读过不鼓励在子组件上调用方法并且我应该使用事件。我现在正在看docs，但我只能看到一个孩子与父母交谈的例子，而不是相反。

当搜索条件发生变化时，如何与菜单组件进行通信？

修改

根据一些博客文章，曾经有一个menu方法用于与子组件对话，但有关该组件的文档已经消失。这曾是网址：http://vuejs.org/api/#vm-broadcast

Answer 1

约定是＆＃34; props down, events up＆＃34;。数据通过道具从父项传递到子组件，因此您可以在菜单中添加道具，可能：

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

过滤系统（我猜测它是计算好的吗？）将基于searchTerm，并且只要它发生变化就会更新。

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

Answer 2

是的，$broadcast在2.x中已被弃用。有关替换功能（包括事件中心或here）的一些想法，请参阅Migration guide。

Answer 3

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

首先，让我们创建名为 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)
   }
}

你是对的$ broadcast和$ dispatch在VueJS 2.0中被弃用