![](https://img.haomeiwen.com/i6560153/00f368d438055d13.png)
Sending Data into a component requires Prop, Sending data out of Component requires Emit
![](https://img.haomeiwen.com/i6560153/5183330ea7bc6f01.png)
Data Exchange between sibling component is achieved by Central Event Bus. Complicated sibling component data changes uses VueX
component包含 Template, Data, props, methods 其中Template是必须要的
![](https://img.haomeiwen.com/i6560153/704a286ee26e5158.png)
Register component
![](https://img.haomeiwen.com/i6560153/d51b8b1c863d3dff.png)
install component
![](https://img.haomeiwen.com/i6560153/86e197b6c3e38648.png)
![](https://img.haomeiwen.com/i6560153/583bad44b355af7f.png)
![](https://img.haomeiwen.com/i6560153/18de29b157a9a9e7.png)
![](https://img.haomeiwen.com/i6560153/476551985c598d06.png)
如果要从data() 里使用props的值: this.prop
send data out of component:
![](https://img.haomeiwen.com/i6560153/0e0ecc2b231d0076.png)
v-bind和v-model都是让external data进入的
![](https://img.haomeiwen.com/i6560153/25f7a531641f6be8.png)
![](https://img.haomeiwen.com/i6560153/1bd99f3c308d5918.png)
![](https://img.haomeiwen.com/i6560153/95490c3418d1cb0f.png)
![](https://img.haomeiwen.com/i6560153/a21ea9ea949a23e5.png)
经典啊😱😱😱😱
这里是一个使用event驱动emit 函数 把数据从component.data传递到Vue.data里的例子。这个例子展现了传入component以及传出component
![](https://img.haomeiwen.com/i6560153/e1e9cbed6dd13025.png)
首先Input的地方用v-model 和component.message绑定起来。 这样数据传入了component里。
然后定义Event: v-on: click='send' 调用了this.$emit()。 this.emit把message传入Vue.content里 通过v-on:relay='function' 这个Tag。 content注意! 在P tag里refer了。。。 {{content}}
V-model = V-bind + V-on
![](https://img.haomeiwen.com/i6560153/b2b3b63a831bf26f.png)
![](https://img.haomeiwen.com/i6560153/44f8dc38e3e8ed7b.png)
同时send Multiple data
![](https://img.haomeiwen.com/i6560153/fca4f2faad74dbd1.png)
Sibling components communication
![](https://img.haomeiwen.com/i6560153/5903412301ddf410.png)
![](https://img.haomeiwen.com/i6560153/e29e9e743bc583e3.png)
![](https://img.haomeiwen.com/i6560153/700c50d8caa5563e.png)
![](https://img.haomeiwen.com/i6560153/86f56c873c19e065.png)
网友评论