组件间通信

[reverland]

组件通信

将content组件部分变成archive，category，tag，about，friendlink等几个组件，
通过点击导航中链接可以在这几个组件之间切换。

复杂应用在各个组件间往往需要共享状态

在组件间传递信息方法：

1. event
2. props
3. 让单独的第三方什么东西接管通信

具体方式也很多：

1. 传回调（注意js中的this指向的是谁）
2. 通过分离的事件总线，（event emitter）
3. 通过分离的统一管理（比如vuex或者redux的方式）
4. 双向绑定传状态 （.sync之类)

目标

实现点击导航不同按钮切换到不同组件视图的功能

（可以先不引入vue-router，用动态组件。也可以引入vue-router,随意）

[reverland]

@xiaoxiaff

[xiaoxiaff]

这些组件间的通信是属于哪个程序的范畴，我在vue-router里面能找到，但是vue-router里面是用html和js结合的形式，但是js的规范不满足vuejs-templates里面js的规范，所以应该怎么办···

[reverland]

组件：一个和外界有一定隔离自成一体的部分，形式表现为一个vue单文件
组件通信原因在于组件有可能共享状态传递消息，比如你点击导航部分（目前导航可以视为一个组件）却要根据这个点击的操作要通知content切换成archive，category，tag，about，friendlink之一，在比如各个组件可能共享一组信息，比如用户个人信息什么的。

如果只是为了导航的切换效果，暂时没必要用vue-router，用动态组件能达到同样效果。但是，要求导航组件能修改覆组件状态

ps：vue-router是vue插件，你可以看看我那边怎么引入的

[xiaoxiaff]

哪个文档有组件通信方面的内容？

[reverland]

@xiaoxiaff

https://vuejs.org/guide/components.html

[xiaoxiaff]

现在把content分成了多个不同的组件，但是Blognav里面的按钮触发Blognav.vue里面的method，而Content.vue管理着content，消息如何在不同的vue之间传递？

[xiaoxiaff]

现在能够在单个vue文件内实现组件跳转，但是Nav里面如何通过点击将变量传到Content.vue还有很大的问题··· 我import content进nav文件里后通过content.val无法访问到content里面的val变量

[reverland]

@xiaoxiaff 这周比较忙，

比较普遍的实践是，通过prop从父组件将数据流向子组件，通过event将数据从子组件流到父组件。

不过，黑魔法很多，你可以访问vm.$parent，vm.$root等等。。。

我说的传数据，还可以传函数，传引用。。。

[reverland]

理论上，父级组件不该直接操作被隔离的子组件的状态，而应该让子组件操作，这样隔离应该才有意义吧