关于Vue的一些小笔记（七）组件通信
前言：这次的笔记主要记下组件的父子通信
父子组件的通信
我们知道，子组件是不能引用父组件或者vue实例里的数据的。但是，在开发中，如果我们从服务器上请求了很多的数据，且想要一部分数据在子组件里进行展示，这个时候，并不会让子组件再发送一个请求到服务器，而是直接让大组件（父组件）将数据传递给小组件（子组件）。所以vue给我们提供了父子组件之间数据传递的方法。
一、父组件向子组件传递数据
通过 props 向子组件传递数据。
在组件中，使用props选项来声明需要从父级接收到的数据
（关键：在使用时用v-bind传值）
- 方法一：字符串数组，数组中的字符串是传递时的名称
- 方法二：对象，对象可以设置传递时的类型，也可以设置默认值等
<div id="app">
<cpn v-bind:myballs="balls" :mymessage="message">cpn>
div>
<template id="mycpn">
<div>
{{myballs}}
{{mymessage}}
div>
template>
<script>
//创建一个组件 父传子：props
const cpn ={
template:"#mycpn",
//这里使用了字符串数组的方式
props:['myballs','mymessage'] //这里的myballs和mymessage是变量
//第二种方式：使用对象，可以设置类型
props:{
myballs:Array, //一定要写类型，不然会报错
mymessage:{
//也可以这样写，提供一个默认值
type:String,
default:"好好学习"//默认值在没有被v-bind绑定时会显示
required:true //必传值，就是要使用v-bind，会与默认值产生矛盾
}
}
}
//创建一个vue实例
const app = new Vue({
el:"#app",
data:{
message:"我爱学习",
balls:['篮球','羽毛球','排球','台球']
}
components:{
cpn //对象的增强写法，注册组件
}
})
script>
二、props数据验证
props有两种写法，数组和对象。但当我们需要对props进行类型等验证时，就需要对象的写法。
验证支持以下的数据类型（type后面可以跟着的）：
| String | Object |
|---|---|
| Number | Date |
| Boolean | Function |
| Array | Symbol |
Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须是一个函数，要有返回值
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数，自己写的一个验证
propF: {
validator: function (value) {
// 这个值必须是下列字符串中的一个，否则就报错
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
props驼峰标识
驼峰即在变量的命名时出现大写字母。当出现驼峰标识时，再使用props就可能找不到要找的变量。故要尽量避免。
如果非要使用驼峰标识，那么必须在v-bind绑定时添加“-”，并且把大写字母化为小写字母。
myMessage ----> my-message
三、子组件向父组件传递数据
当子组件需要向父组件传递数据时，要用到自定义事件。v-on不仅可以用于监听DOM事件，也可以用来监听组件间的自定义事件。
自定义事件的流程：
- 在子组件中，通过$emit()来触发事件
- 在父组件中，通过v-on来监听子组件事件
cpn>
div>
<template id="cpn">
<div>