教女朋友的—vue组件通讯的7中方式

总结归纳

常用的自定义组件通信方式

1. 自定义属性props、自定义事件$emit --推荐使用的方式
2. 获取子组件的实例$refs、获取父组件的实例 $parent – 熟悉并且会用该方法
3. vuex – 复杂情况下推荐使用 需要掌握
4. $emit、 $on – 了解 即可 特定情况下会使用到

1、自定义属性props、自定义事件$emit

//  假设 当前父组件 father.vue  子组件 childer.vue
	// 父组件通过 自定义属性  将数据传递给子组件
	// 父组件页面中  在引用子组件后  可以自定义属性来将值传递给子组件  类似于原生的html标签  会有一些class  id  absolute 之类的属性 
	<childer  name='韩梅梅' age='18' />
	
	// 子组件中 接收该自定义属性
	<template>
		// ...
	</template>
	export default{
		// name...
		// data:{}...
		props:{
			name:{
				type: String,  // 接收的自定义属性是什么类型数据
				default: '' // 自定义属性没有传递时的默认值
			},
			age:{
				type: [Number,String],  // 当接收类型可能是多种时
				default: 18
			}
		}
	}
// 父传子  自定义属性传值完毕  
	

	// 子组件通过 自定义事件（方法） 将数据以形参的方式传递回父组件
	<childer  @zidingyifun='change' /> // 父页面中

	// 子页面中
	<template>
		<div @click='childerCilck'>123</div>
		// ...
	</template>
	export default{
		// name...
		// data:{}...
		props:{
			name:{
				type: String,  // 接收的自定义属性是什么类型数据
				default: '' // 自定义属性没有传递时的默认值
			},
			age:{
				type: [Number,String],  // 当接收类型可能是多种时
				default: 18
			}
		},
		method:{
			childerCilck(){ // 子组件中点击触发事件
				// 父组件中 类似于原生的@click事件  可以自定义一个事件名称
				// 子组件中通过$emit(形参1,形参2) 形参1 在父组件中自定义事件名称  形参2 子组件想传给父组件的数据
				this.$emit('zidingyifun', {...})
			}
		}
	}

	// 父页面中
	<template>
		<childer  @zidingyiFun='change' /> // 父页面中
		// ...
	</template>
	export default{
		// name...
		// data:{}...
		method:{
			change(e){ // 当子组件触发方法后 会自动触发该方法 
				// e 就是 子组件传递过来的数据
				console.log(e) 
			}
		}
	}
// 子传父  自定义事件  完成  接下来是注意事项

props、$emit 注意事项
1、由于html对大小写不敏感 所以如果你需要传递半驼峰格式则需要在中间用-隔开 如下 （貌似 新版本不需要 - 连字符格式 但是官方是始终推荐使用 - 连字符来表示半驼峰）

<childer  @zidingyi-fun='change'  :dia-type="diaType" />
// ...
	props:{
		diaType:{}// ...
	}
// ...
	this.$emit('zidingyiFun',...)
// ...

2、获取子组件的实例$refs、获取父组件的实例 $parent

// 在父组件中  通过 $refs 拿到子组件的实例 来直接赋值给子组件数据 或者使用其中的方法
// 父组件中
<childer ref='childerComponent' />
<div @click='click'>点击调用子组件的方法或者赋值</div>
// ...
	click(){
		let childComponent = this.$refs('childerComponent')
		// 此时的 childComponent 就是子组件 你可以对其任意操作
		// 修改childComponent 中data的数据
		childComponent.name = '李梅'
		childComponent.age = '18'
		
		// 使用子组件的 方法
		childComponent.zidingyiFun()
	}
// ...


// 子组件中 通过this.$parent() 拿到父组件的实例  同上
<div @click='click'>点击调用父组件的方法或者赋值</div>
// ...
	click(){
		let parentComponent = this.$parent()
		// 此时的 parentComponent 就是父组件 你可以对其任意操作
		// 修改parentComponent 中data的数据
		parentComponent.name = '李梅'
		parentComponent.age = '18'
		
		// 使用父组件的 方法
		parentComponent.zidingyiFun()
	}
// ...

$refs 、 $parent() 注意事项
1、在父组件中 获取子组件时 必须确保该子组件dom元素已经渲染并且存在

3、vuex 设计到多组件或者复杂场景下推荐使用

vuex 官网链接 需要系统性的学习.

4、$emit、 $on 仅作为额外补充 面试可能会用到实际业务用到的比较少

官网链接 作为知识补充 页面搜索$on.