[JavaScript知识库]Vue父子组件间的通信

Vue父子组件间的通信

1. 在Vue中子组件是不能引用父组件或者Vue实例的数据的
2. 但是，在开发中，往往一些数据确实需要从上层传递到下层：
   1. 比如在一个页面中，我们从服务器请求到了很多的数据
   2. 其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示
   3. 这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件(父组件)将数据传递给小组件(子组件)

父子组件间的通信，有两种方式

1. 通过props向子组件传递数据（父传子）
2. 通过自定义事件向父组件发送消息 （子传父）
   

父传子 - props

1. 父组件通过props向子组件传递数据

// 父组件
<templater>
	<div>
		<Son :message="info"></Son>
	</div>
</template>

<script>
// 引入子组件
import Son from '.....'
export default {
	name: 'parent',
	components: { Son },
	data () {
		return {
			info: {a: 1, b: 3}
		}
	}
}
</script>

// 子组件
<templater>
	<div>
		<div></div>
	</div>
</template>

<script>
export default {
	name: 'son',
	// 子组件使用props接受父组件传递过来的数据message
	props: ['message'],
	methods: {
		showMessage() {
			console.log(this.message) // 使用message
		}
	}
}
</script>

props数据验证

1. props数据可以支持许多种数据类型
   • String — 字符型
   • Number — 数值型
   • Boolean — 布尔型
   • Array — 数组型
   • Object — 对象
   • Date — 日期
   • Function — 函数
2. 当有自定义构造函数时，验证也支持自定义的类型

props: {
	// 匹配Number类型验证
	propA: Number,
	// 匹配多种数据类型验证
	propB: [String, Number],
	// 带默认值的数据
	propC: {
		type: Number,
		default: 100
	},
	// 带默认值的对象
	propD: {
		type: Object,
		// 带默认值的对象或者数组，数据必须从一个函数中返回
		default: function () {
			return {message: 'hello world!'}
		}
	}，
	// 自定义验证函数
	propE: {
		// 参数value为父组件传递的数据
		validator: function (value) {
			// 表示从父组件传递的值value必须为['success', 'warn', 'error']其中之一
			return ['success', 'warn', 'error'].indexOf(value) !== -1
		}
	}
}

子传父 - 自定义事件

1. 子组件传递数据或事件到父组件中，需要用到自定义事件来完成
2. 自定义事件流程
   1. 在子组件中，通过$emit(‘自定义事件名’, 传递的数据)来触发事件，向父组件发射数据
   2. 在父组件中，通过v-on/@来监听子组件自定义事件

// 父组件
<templater>
	<div>
		<!-- 第一种监听自定义事件的方式，较为常用 -->
		<!-- 监听自定义事件send，只要自定义事件被触发就调用showMessage函数 -->
		<Son @send="showMessage"></Son>

		<!-- 第二种监听自定义事件的方式，比较灵活 -->
		<Son ref="son"></Son>
	</div>
</template>

<script>
// 引入子组件
import Son from '.....'
export default {
	name: 'parent',
	components: { Son },
	mounted () {
		// 第二种监听自定义事件的方式
		// 灵活的地方在于可以给自定义事件的绑定添加一些需求，比如页面加载后延迟3秒后进行自定义事件的监听（添加定时器）
		this.$refs.son.$on('send', this.showMessage)
	}
	methods: {
		// value为子组件给父组件通过自定义事件传递的值
		showMessage (...value) {
			console.log(...value) // 2 4 6
		}
	}
}
</script>

// 子组件
<templater>
	<div>
		<div @click="sendMessage"></div>
	</div>
</template>

<script>
export default {
	name: 'son',
	// 子组件使用props接受父组件传递过来的数据message
	props: ['message'],
	methods: {
		sendMessage () {
			// 向父组件发射数据$emit('自定义事件名', 传递的数据)
			this.$emit('send', 2, 4, 6)
		}
	}
}
</script>