组件之间的说明，分为好几种：
1，父组件向子组件传递数据
2，子组件通过事件向父组件传值
3，兄弟组件互相传值
注：父子组件渲染的一个过程是： 父create => 子created => 子mouted => 父mouted
单向数据流，出现在组件通信。
父组件是通过 prop 把数据传递到子组件的，但是这个 prop 只能由父组件修改，子组件不能修改，否则会报错
子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。
1，父组件向子组件传递数据
在vue中，可以使用 prop向子组件中传递数据
父组件部分：
首先父组件中引入子组件，三个步骤：
1，引入子组件
2，注册组件
3，在父组件中调用
data() {
return {//要在data中定义要传的信息
userName:{name:'parent',mode:"父传子"}
};
},
子组件：
子组件通过 props 来接收父组件传来的值
export default {
name: "child",
props: ["users"],//` 这里接受的是前面子组件中 :users，并不是userName`
data() {
return {};
}
}
};
这是，我们就可以看到页面中，父组件传到子组件的信息
image.png
2，子组件通过事件向父组件传值
子组件中
setValue(value){// 子组件向父组件传值用 $emit 方法
this.$emit('changeFu',value)
}
父组件
接收值:
{{msg}}
** `父组件中的事件一定要绑定在组件上，否则不生效 `**
changeParent(value) {
this.msg = value;
}
3，兄弟组件互相传值
3.1 第一种：
1，在生成vue实例前，给Vue的原型上添加一个bus属性，这个属性是vue的实例；之后创建的vue实例都具有bus这个属性
// main.js
Vue.prototype.bus = new Vue();
在其中一个兄弟组件中设置：
// js
setValue(value){
console.log(value)
this.bus.$emit('sharetext', value)//触发事件sharetext
}
在另中一个兄弟组件中设置
mounted() {
//let _this = this;因为this的指向发生了变化，不用箭头函数的话就要先把this保存起来
this.bus.$on("sharetext", value => { //通过$on监听事件sharetext
this.value = value;
});
},
注：不管在那个兄弟组件中，value都要初始化定义
视图：
image.png
3.2 第二种，和前面第一种很类似
1，新建一个js文件， 我这里叫做 bus.js；
// 文件内容
import Vue from 'vue';
export default new Vue();
然后在你需要传值的兄弟组件中分别引入 import bus from '文件路径'
setValue(value){
bus.$emit('sharetext', value)//触发事件sharetext
}
最后在你需要的通信的另一个组件执行如下：
mounted() {
bus.$on("sharetext", value => {//通过$on监听事件sharetext
this.value = value;
});
}
image.png
4，父组件通知子组件执行事件
子组件
created: function(){
this.$on('change', function(){
console.log('something handled!');
});
}
父组件
this.$refs['child'].$emit('hange');
5，传值是各种属性时
props: {
**1， 基础的类型检查（null 匹配任何类型）
**2，多个可能的类型
arrayA: [String, Number],
**3，必填的字符串
arrayB: {
type: String,
required: true
}，
**4，带有默认值的数字
arrayC: {
type: Numeber,
default: 100
}，
**5，带有默认值的数组 or 传值是数组
array: {
type: Array,
default: () => { return [ ] } // 或者是下面的方法
default：function(){
return [ ]
}
},
**6，带有默认值的对象 or 传值是对象
object: {
type: Object,
default: () => {} // 或者是下面的方法
default：function(){
return { message：‘hello’ }
}
}，
**7，传对象或者数组都可以，两种类型
code: {
type: [Object, Array]
}
}