vue中子组件和子组件之间怎么通信_Vue组件之间通讯方式来自专栏前端入门札记在Vue中，组件的...

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

Vue组件之间通讯方式

来自专栏前端入门札记

在Vue中，组件的通讯方式还是有很多中的

通过 Prop 向子组件传递数据

监听子组件事件

通过插槽分发内容

Vuex状态管理

通过 Prop 向子组件传递数据 些时候，我们提到了创建一个博文组件的事情。问题是如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话，它是没有办法使用的。这也正是 prop 的由来。

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中

Vue.component('blog-post', { props: ['title'], template: '

{{ title }}

' })

一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。

一个 prop 被注册之后，你就可以像这样把数据作为一个自定义特性传递进来：

监听子组件事件 不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子，如果触发一个 camelCase 名字的事件：

this.$emit('myEvent')

则监听这个名字的 kebab-case 版本是不会有任何效果的：

不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或属性名，所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。 因此，我们推荐你始终使用 kebab-case 的事件名。

通过插槽分发内容 Vue 实现了一套内容分发的 API，这套 API 基于当前的 Web Components 规范草案，将 元素作为承载分发内容的出口。

它允许你像这样合成组件：

Your Profile

然后你在 的模板中可能会写为：

当组件渲染的时候，这个 元素将会被替换为“Your Profile”。插槽内可以包含任何模板代码，包括 HTML：

Your Profile

甚至其它的组件：

Your Profile

如果 没有包含一个 元素，则任何传入它的内容都会被抛弃。

Vuex状态管理 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，在这里就不详细介绍了