14 - Vue 学习笔记 - 父子组件通信父传子

父子组件通信

我们知道，子组件是不能引用父组件或者 Vue 实例的数据的。
但是，在开发中，往往有一些数据需要从上层传递到下层：
比如在一个页面中，我们从服务器请求到了很多数据。
其中一部分数据，并非是整个页面的大组件来一并展示的，而是需要下面的子组件进行展示。
这个时候，并不会让子组件再发送一次网络请求（子组件很多，如果每次都发送请求，对服务器压力很大），而是直接让大组件(父组件) 将数据传递给小组件(子组件)。所以我们需要使用到父子组件之间的通信。

如何进行父子组件的通信呢？Vue 官方提到：

1. 通过 props 向子组件传递数据。
2. 通过事件向父组件发送消息。

props 基本用法

在组件中使用选项 props 来声明需要从父级接收到的数据。
props 的值有两种方式：

1. 字符串数组，数组中的字符串结束传递时的名称。
2. 对象，对象可以设置传递时的类型，也可以设置默认值等。

数组形式

<div id="app">
	<!-- 一定要使用 v-bind: 赋值，如果直接赋值，会把结果当成一个字符串赋值给子组件	-->
	<!-- <cpn cmovies="movies" cmessage="message"></cpn> cmovies=movies, cmessage=message -->
	<cpn :cmovies="movies" :cmessage="message"></cpn>
</div>

<template id="cpn">
	<div>
		<ul>
			<li v-for="movie in cmovies">{{movie}}</li>
		</ul>
		<h2>{{cmessage}}</h2>
	</div>
</template>

<script src="../js/vue.js"></script>
<script>
	// 父传子: props
	const cpn = {
		template: `#cpn`,
		props: ['cmovies', 'cmessage'],
		data() {
			return {}
		},
		methods: {}
	}
	
	const app = new Vue({
		el: "#app",
		data: {
			message: "hello",
			movies: ['海王', '海贼王', '海尔兄弟']
		},
		components: {
			cpn
		}
	});
</script>

对象形式

我们将 props 修改为:

props: {
	//  类型限制，可以限制传递过来的参数类型
	cmovies: Array,
	cmessage: String
}

当然类型也可以是多个：

props: {
	// 要求 message 是 String 或 Number 类型
	cmessage: [String, Number]
}

我们也可以对 props 赋予默认值：

props: {
	// 提供一些默认值
	cmessage: {
		type: String,
		default: '默认值'
	},
	cmovies:{
		type: Array,
		// 在 Vue 的低版本可以这样写，但是高版本如果类型是 Object 或 Array ，需要使用工厂函数返回。
		// default: []
		default() {
			return [];
		}
	}
}

我们还可以限制，必须传递某些参数，我们对 cmessage 修改为如下：

cmessage: {
	type: String,
	default: '默认值',
	// required: true 限制必须传递值进来
	required: true
}

我们也可以自定义验证函数:

props:{
	validator: function(value) {
		// 这个值必须匹配下列字符串中的一个
		return ['success','warning','danger'].indexof(value) !== -1;
	}
}

当我们有自定义构造函数时，验证也支持自定义类型

function Person (firstName, lastName) {
	this.firstName = firstName;
	this.lastName = lastName;
}

Vue.component('blog-post', {
	props:{
		author: Person
	}
})

验证都支持哪些数据类型？

• String 、 Number 、 Boolean 、 Array 、 Object 、 Date 、 Function 、Symbol

props 中的驼峰标识

我们可能会发现在外我们定义 props 的参数名字时，如果出现了大写，结果就获取不到传递过去的参数的值，如下：

<div id="app">
	<cpn :cInfo="info"></cpn> <!-- 获取不到 info 的值，也没有报错 -->
</div>

<template id="cpn">
	<div>
		<h2>{{cInfo}}</h2>
	</div>
</template>

<script src="../js/vue.js"></script>
<script>
	const cpn = {
		template: `#cpn`,
		props: {
			cInfo: {
				type: Object,
				default() {
					return {}
				}
			}
		}
	}
	
	const app = new Vue({
		el: "#app",
		data: {
			info: {
				name: 'tt',
				age: 18,
				height: 1.8
			}
		},
		components: {
			cpn
		}
	});
</script>

原因是因为 Vue 中的 v-bind: 不支持大写这种语法，我们需要使用下列方式来替换：

<cpn :c-info="info"></cpn> <!-- 使用 -i 替换 I -->

这样就可以正确的传递值进去了。