【1】 组件通信的5种方式

props
vue的自定义事件
pubsub第三方库
slot
vuex

① props

父子组件间通信的基本方式
属性值的2大类型: 一般: 父组件-->子组件函数: 子组件-->父组件
隔层组件间传递: 必须逐层传递(麻烦)
兄弟组件间: 必须借助父组件(麻烦)

② vue自定义事件

子组件与父组件的通信方式
用来取代function props
不适合隔层组件和兄弟组件间的通信

③ pubsub第三方库(消息订阅与发布)

适合于任何关系的组件间通信

④ slot

通信是带数据的标签，注意: 标签是在父组件中解析。

⑤ vuex

多组件共享状态(数据的管理)，组件间的关系也没有限制。功能比pubsub强大, 更适用于vue项目。

【2】组件引入与组件传值

① 父页面

<template><div class="todo-container"><div class="todo-wrap"><!-- 给子组件绑定方法 --><TodoList :todos="todos"/><!-- 给子组件绑定方法并传值 -->      <TodoFooter :todos="todos" :deleteCompleteTodos="deleteCompleteTodos" :selectAll="selectAll"/></div></div>
</template>

② 脚本

父页面需要引入并声明组件：

<script>
//import引入组件import TodoHeader from './components/TodoHeader.vue'import TodoList from './components/TodoList.vue'import TodoFooter from './components/TodoFooter.vue'import storageUtils from './utils/storageUtils'export default {//声明组件components: {TodoHeader,TodoList,TodoFooter}//数据data () {return {todos: storageUtils.readTodos()}},methods: {addTodo (todo) {this.todos.unshift(todo)},deleteTodo (index) {this.todos.splice(index, 1)},// 删除所有已完成的deleteCompleteTodos () {this.todos = this.todos.filter(todo => !todo.complete)},// 全选/全不选selectAll (isSelectAll) {this.todos.forEach(todo => {todo.complete = isSelectAll})}}}
</script>

export 用来导出模块，Vue 的单文件组件通常需要导出一个对象，这个对象是 Vue 实例的选项对象，以便于在其它地方可以使用 import 引入。而 new Vue() 相当于一个构造函数，在入口文件 main.js 构造根组件的同时，如果根组件还包含其它子组件，那么 Vue 会通过引入的选项对象构造其对应的 Vue 实例，最终形成一棵组件树。

使用export default命令，为模块指定默认输出，这样就不需要知道所要加载模块的变量名。

default只能有一个值，所以一个文件内不能有多个export defaul。

export default输出一个叫做default的变量，然后系统允许你为它取任意名字。所以可以为import的模块起任何变量名，且不需要用大括号包含

export default写法顺序

name
components
props
data
created
methods
mounted
computed
watch

③ 子页面

子页面通过props接受父组件的传值：

<template><div class="todo-footer"><label><input type="checkbox" v-model="checkAll"/></label><span><span>已完成{{completeSize}}</span> / 全部{{todos.length}}</span><button class="btn btn-danger" v-show="completeSize" @click="deleteAllCompleted">清除已完成任务</button></div>
</template><script>export default {//接收父组件的值传递与方法传递props: {todos: Array,deleteCompleteTodos: Function,selectAll: Function},computed: {completeSize () {return this.todos.reduce((preTotal, todo) => preTotal + (todo.complete?1:0) ,0)},checkAll: {get () { // 决定是否勾选return this.completeSize===this.todos.length && this.completeSize>0},set (value) {// 点击了全选checkbox  value是当前checkbox的选中状态(true/false)this.selectAll(value)}},},methods: {deleteAllCompleted () {if(window.confirm('确定清除已完成的吗?')) {this.deleteCompleteTodos()}}}}
</script>

【3】 props的三种写法

① 第一种简写

 export default {// 声明接收标签属性props: ['todos'], // 会成为当前组件对象的属性, 可以在模板中直接访问, 也可以通过this来访问components: {TodoItem}}

② 第二种写法

 export default {props: {// 指定属性名和属性值的类型todo: Object,index: Number}
}

③ 第三种复杂写法

 export default {props: {todo: {type:Function,required:true,default: function () {return { message: 'hello' }},validator: function (value) {// 这个值必须匹配下列字符串中的一个return ['success', 'warning', 'danger'].indexOf(value) !== -1}},index: Number}
}

type：可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。

会检查一个 prop 是否是给定的类型，否则抛出警告。Prop 类型的更多信息如下所示：

props: {title: String,likes: Number,isPublished: Boolean,commentIds: Array,author: Object,callback: Function,contactsPromise: Promise // or any other constructor
}

default：any

为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。

required：Boolean

定义该 prop 是否是必填项。在非生产环境中，如果这个值为 truthy 且该 prop 没有被传入的，则一个控制台警告将会被抛出。

validator：Function

自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出。你可以在这里查阅更多 prop 验证的相关信息。

props更多文档参考：https://cn.vuejs.org/v2/guide/components-props.html

---

【4】组件通信之消息发布订阅

消息订阅与发布(PubSubJS 库)，此方式可实现任意关系组件间通信(数据)。

需要先安装PubSubJS 库，npm install --save pubsub-js

然后引入：

 import PubSub from 'pubsub-js'

① 发布消息

PubSub.publish('msg', data)

触发事件(发布消息)

DOM 事件: 用户在浏览器上对应的界面上做对应的操作
自定义: 编码手动触发

实例如下：

 deleteItem () {// this.deleteTodo(this.index)// 发布消息(deleteTodo)PubSub.publish('deleteTodo', this.index)}

② 订阅消息

PubSub.subscribe('msg', function(msg, data){})

绑定事件监听(订阅消息)

目标: 标签元素<button>
事件名(类型): click/focus
回调函数: function(event){}

实例如下：

    mounted () {// 绑定自定义事件(addTodo)监听this.$refs.header.$on('addTodo',  this.addTodo)// 订阅消息(deleteTodo)PubSub.subscribe('deleteTodo', (msg, index) => {this.deleteTodo(index)})},

【5】组件间通信之slot

slot主要用于父组件向子组件传递标签数据。
父组件实例

<TodoFooter><input slot="checkAll" type="checkbox" v-model="checkAll" /><span slot="size">已完成{{completeSize}} / 全部{{todos.length}}</span><button slot="delete" class="btn btn-danger" v-show="completeSize" @click="deleteAllCompleted" >清除已完成任务</button>
</TodoFooter>

子组件实例

<template><div class="todo-footer"><label><!--<input type="checkbox" v-model="checkAll"/>--><slot name="checkAll"></slot></label><span><slot name="size"></slot><!-- <span>已完成{{completeSize}} / 全部{{todos.length}}</span>--></span><slot name="delete"></slot><!-- <button class="btn btn-danger" v-show="completeSize" @click="deleteAllCompleted">清除已完成任务</button>--></div>
</template>

【6】自定义事件

① v-on指令监听事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。v-on:事件名, 可以缩写为: @事件名

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

.stop
.prevent
.capture
.self
.once
.passive

代码示例如下

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 -->
<form v-on:submit.prevent></form><!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div><!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

---

② 自定义事件监听

第一种方式

#给TodoHeader 标签对象绑定addTodo事件监听
<TodoHeader @addTodo="addTodo"/>

那么子组件如何触发事件呢?

//this.addTodo(todo)---原先使用props通信/*触发自定义事件: addTodo*/
this.$emit('addTodo', todo)

第二种方式

<TodoHeader ref="header"/>mounted () {// 绑定自定义事件(addTodo)监听this.$refs.header.$on('addTodo',  this.addTodo)
}

需要注意的是上面函数传递方式只适用于父-子，也就是A-B；A-B-C则不适用。