22-vue 组件通信的五种方式(总结)：props、自定义事件、ref\refs 、消息的订阅与发布(pubsub-js库)、slot插槽法

第一种 props

  父组件用 ：（v-bind的简写）传递，子组件用 props 来接收，并注明类型

代码示例

父组件代码：

<template>
	<TodoHeader :addTodo="addTodo"/>
</template>

子组件代码：

export default{
	props:{
		addTodo：Function
	}
}

 

第二种 自定义事件

  父组件用@(v-on的简写)来绑定事件，子组件(在methods中)用 vue实例方法$emit(“事件名”，参数)来接收

代码示例

父组件代码：

<TodoHeader @addTodo="addTodo"/>  //绑定事件监听

子组件代码：

methods:{
	// 触发事件
	 this.$emit("addTodo",todo);  //将方法addTodo(todo) 的拆分  addTodo为方法名  todo为方法的参数
}

this.$emit(“方法名”，方法中参数)

 

第三种 ref\refs

  父组件用 ref为子组件注册信息 ，并在mounted中写 vue实例方法 refs.re