组件
每个组件实例，都是一个独立的对象，对象中绑定有的数据，每个组件的数据必须是不同地址的数据
父组件向子组件传值
需要通过属性的形式，父组件向子组件传值
<MyDemo> 属性名="属性值"</MyDemo>
如果属性名没有通过v-bind进行动态绑定，那么属性值不管写什么内容都是字符串类型。
使用v-bind 绑定之后，属性值区域变成了表达式
<MyDemo> v-bind:属性名="表达式"</MyDemo>
如果要传的数据是一个数组，数组里面包含对象。例如
data() {
return {
list: [
{
id: 1,
title: 'aaa',
user: 'zs'
}
]
}
}
那么在向子组件传值的时候，就可以采用v-for进行遍历传值
<MyDemo v-for="item in list" :key="item.id" :user="item.user"
:title="item.title"></MyDemo>
简写
<MyDemo v-for="item in list" :key="item.id" v-bind="item"></MyDemo>
子组件接收父组件传递过来的数据
子组件需要在js 中设置props属性。props属性的三类写法：
第一类，props的值是数组。
props: [属性1, 属性2 ...]
第二类：props的值是一个对象，属性值同样是一个数组或构造函数。
props: {
属性名: 构造函数, // String, Number ...
属性名: [构造函数], // [String, Number...]
}
第三类，props的值是对象，属性值同样是对象，对象当中包括常用的三个属性。
props: {
属性名: {
type: 类型,
default: 默认值, // 父组件并没有给子组件传递数据的时候，默认值生效
required: 必填项 // 如果设置了这个属性，那么父组件就必须传递数据，同时这个属性和default 是互斥的
}
}
在第三轮的使用方法中，我们还可以使用validator函数来进行自定义的校验
props: {
属性名: {
// val表示的父组件传递到子组件的属性值
validator(val) {
// 进行校验...
return // return的结果如果为true，则表示属性值通过校验，vue不会报错。如果返回值为false，则表示属性值没有通过校验，vue就会报错
}
}
}
<template>
<div>
<h3>总人数：{{ data.length }}</h3>
<ul>
<li v-for="item in data" :key="item.id">
姓名: {{ item.name }}; 年纪: {{ item.age }}
</li>
</ul>
<p>{{ car }}</p>
<p>{{ money }}</p>
<p>{{ age }}</p>
<p>{{ title }}</p>
</div>
</template>
<script>
export default {
// 利用工厂函数提供数据，保证每次提供的数据，都是最新创建的，一个组件使用多次互不影响
data() {
return {}
},
props: {
// 1. 基础的类型检查 Number String Boolean Object Array Function ...
data: Array,
car: String,
money: Number,
flag: Boolean,
// 2. 多个可能的类型
params: [String, Number, Boolean],
// 3. 必填项 （要求用户必须传，如果不传，就报错）
age: {
type: Number,
required: true
},
// 4. 默认值 （用户可传可不传，如果不传，使用默认值）
title: {
type: String,
default: '大标题'
},
// 默认值补充，如果是复杂类型，比如对象，比如数组，比较特殊，
// 默认值需要通过函数返回值提供 (不用记，写错了会报错的)
arr: {
type: Array,
// 目的：通过函数提供的函数，每次生成一个新的组件，默认值[] 都是新生成的，多个组件实例不影响
default () {
return []
}
},
obj: {
type: Object,
default () {
return {}
}
},
// 5. 自定义验证函数 color 可选值 red yello green (可以解决一切需求，想怎么校验就怎么校验！更灵活)
color: {
validator (value) {
// return true 通过校验
// return false 没通过校验
// 内部逻辑，自行判断提供
// if (value === 'red' || value === 'yellow' || value === 'green') {
// return true
// } else {
// return false // 没通过校验
// }
// arr.includes(值) => 判断数组是否包含某个值，如果包含，返回true，不包含，返回false
const validArr = ['red', 'yellow', 'green', 'blue', 'orange']
return validArr.includes(value)
}
}
}
}
</script>
<style>
</style>
子组件向父组件抛出自定义事件
子组件想要向父组件抛出自定义事件，需要通过$emit方法来实现。
this.$emil(事件名，参数...)
子组件抛出自定义事件之后，父组件就可以在使用子组件的时候，进行时间的监听。
<MyDemo @事件名="事件处理函数"></MyDemo>
单向数据流
在vue中需要遵循单向数据流原则：（从父到子的单向数据流动，叫单向数据流） 1，父组件数据变化了，会自动向下流动影响到子组件 2.子组件不再直接修改父组件传递过来的props,props是只读的