VUEJS学习网址：https://cn.vuejs.org/

此文章是用来记录自己的学习和实践心得。

关注点：

父子组件之间的通信

看图说话：

Pass Props

子组件本身与父组件是孤立的，通过子组件中显示声明的props属性，接收父组件数据;

父组件的数据更新时，子组件的prop会跟着更新；

此数据流动是单向的（看着）;

Emit Events

子组件使用$.emit(fn)向外抛出自己的内部触发的事件;

父组件是否监听？如果父组件需要监听，使用v-on绑定监听，触发对应事件;

以上为通用语，具体分析

子组件可以接收一个字符串，在子组件内部可以用{{label}}使用　

子组件可以接收动态参数

子组件接收到数据之后想处理一下不小心改了怎么办？

给prop创建一个副本（建议深拷贝），处理副本，不动prop;

父组件的数据改变后，子组件的prop会自动更新，但是这个prop的副本不会啊？

使用watch监听这个prop，改变时更新副本;

子组件的prop副本改变了想要通知父组件怎么办？

使用watch监听这个副本，改变时向外抛出自己的内部触发的事件; 。。。

其实以上？？？在2.3有了更好的方法，之前的就是看看。

.sync修饰符

我是用了一下然后喜闻乐见的修改成功了，

子组件想要触发父组件可以emit(父组件需要监听才会触发)，父组件触发子组件事件呢？

通过在引用的子组件上使用ref属性实现父组件调用子组件的方法以及属性

但是！$refs 只在组件渲染完成后才填充，并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案——应当避免在模版或计算属性中使用 $refs 。

关注点：

非父子组件之间的通信

使用空的vue实例作为中央事件总线

<div class="jb51code">
<pre class="brush:xhtml;">
var bus = new Vue();
// 触发组件 A 中的事件
bus.$emit('id-selected',1)

// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected',function (id) {
// ...
})