一、组件间的通信
组件实例的作用域是孤立的；这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。但是父子组件之间需要通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。
在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。如下图所示：
image
二、 Prop — 父组件传递数据给子组件
prop 是父组件用来传递数据的一个自定义属性。子组件需要显式地用 props 选项声明 “prop”：
Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样，prop 可以用在模板内
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '<span>{{ message }}</span>'
})
2.1 简单的传值
image
注意：HTML 特性不区分大小写。当使用非字符串模版时，prop的名字形式会从 camelCase 转为 kebab-case（短横线隔开）。
2.2 父组件传值给子组件，动态绑定
image
运行结果：
image
父组件传递数据给子组件图解:
image
2.3 prop默认是单向绑定
当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意修改了父组件的状态。
案例验证：
image
image
image
运行结果：
image
结论：在vuejs2.0中，任何试图在组件内修改通过props传入的父组件数据都被认为是anti-pattern的。
三、自定义事件
我们知道，父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，应该怎样做？那就是自定义事件！
每个 Vue 实例都实现了事件接口(Events interface)，即：
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
一个简单的官方案例帮助我们来理解：
image
image
运行结果：子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。
四、Slot插槽 — 实现内容分发
父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译
上面话的意思在于：在子组件中定义的数据，只能用在子组件的模板；在父组件中定义的数据，只能用在父组件的模板。如果父组件的数据要在子组件中使用，则需要子组件定义props。
4.1 什么是slot?
slot的意思是插槽，其目的在于让组件的可扩展性更强。打个比方说：假如父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的。
（1） 匿名solt
下面这个示例是一个匿名slot，它只能表示一个插槽:
image
结合上述案例，我们再进一步来了解：比如我们定制了一个button组件，在根组件里注册为vButton，从而复用。那么各个button上的文字肯定是不同的，但是这些文字大部分情况下也是不需要动态更新的，那么就不必用props之类的方法从根组件向子组件传递文字，直接用slot即可。
（2） 实名solt
假设你的电脑主板上的各种插槽，有插CPU的，有插显卡的，有插内存的，有插硬盘的，所以假设有个组件是computer，其模板是：
<template id="computer">
<div>
<slot name="CPU">这儿插你的CPU</slot>
<slot name="GPU">这儿插你的显卡</slot>
<slot name="Memory">这儿插你的内存</slot>
<slot name="Hard-drive">这儿插你的硬盘</slot>
</div>
</template>
那么，你想要配置一台电脑，就可以这么写：
<computer>
<div slot="CPU">Intel Core i7</div>
<div slot="GPU">GTX980Ti</div>
<div slot="Memory">Kingston 32G</div>
<div slot="Hard-drive">Samsung SSD 1T</divt>
</computer>
具体代码如下：
image
五、父子组件之间相互访问
在开发中，组件之间需要相互访问。比如：父组件访问子组件，子组件访问父组件，或者是子组件访问根组件。
针对这种情况，Vue.js提供了以下API:
父组件访问子组件：使用
refs (一个对象，其中包含了所有拥有 ref 注册的子组件)
子组件访问父组件：使用$parent
子组件访问根组件：使用$root
5.1 $children
image
image
运行结果：
image
在父组件中，通过this.children是一个数组，它包含所有子组件的实例。
5.2 $refs
在子组件上使用v-ref指令，可以给子组件指定一个索引ID；通过这个ID我们可以拿到这个组件。
<template id="parent-component">
<div> <first-component ref="fc1"></first-component> <second-component ref="fc2"></second-component> <button @click="printAllChildComponent">输出子组件</button> </div></template>
在父组件中，则通过$refs.索引ID访问子组件的实例。
5.3 $parent
<template id="first-component">
<div> <h2>{{ content }}</h2> <button @click="printParentComponent">获取父组件</button> </div> </template>
'first-component': {
template: '#first-component', data:function () { return { content: '我是子组件1' } }, methods: { printParentComponent: function () { console.log(this.$parent.$el); } } }
运行结果：
image
注意事项：
尽管子组件可以访问父链上任意的实例，不过子组件应当避免直接依赖父组件的数据，尽量显式地使用 props 传递数据。
另外，在子组件中修改父组件的状态是非常不提倡的做法，因为：这让父组件与子组件紧密地耦合；只看父组件，很难理解父组件的状态。因为它可能被任意子组件修改！理想情况下，只有组件自己能修改它的状态。
网友评论