Vue组件之间的信息通信基于props实现父传子父组件调用到的时候子组件中基于props声明需要接收的属性值props中

基于props实现父传子

<my-component aa='xxx' :bb='0'></my-component>

Vue.component('my-component',{
	props:['aa','bb'],
	...
})

props中的一些细节问题：

props中声明的属性和data一样，是响应式数据，挂载到vm实例上，可控制视图渲染，可以通过this.aa / {{aa}} 来获取
命名大小写：父组件传递的属性名是kebab-case格式，子组件在注册是时候应该按照props中获取的是camelCase驼峰命名的格式来接收和使用
传递的属性值默认都是字符串格式，如果想要让传递的值是数字、布尔、数组、对象等格式，我们需要使用v-bind处理
指定属性的类型：props:{xxx:String,...}
指定属性的默认值：props:{xxx:{type:String,default:'xxx',required:true}}
- type数据格式：如果是一个数组，意为指定的多类型皆可以
- default：设置默认值，可以是一个函数，函数返回值是默认值
- required：是否为必传，true为必须传递
- validator自定义验证规则函数：必须符合函数中指定的规则，返回true/false来验证传递的值是否符合规则
样式和class自动合并问题：可以把子组件当作一个标签，我们可以设置id/class/style等内置属性值，这些属性也会传递给子组件，vue帮我们处理好的，该合并的合并，该覆盖的覆盖，无需我们在props中注册处理
基于属性传递进来的值，只能获取使用，不能在子组件中修改（修改后会有对应的效果，子组件会重新渲染，但是控制台会报错）

订阅自定义事件：调用组件的时候基于属性传递一个方法（父）

<my-component @func='xxx'></my-component>

new Vue({
	methods:{
		xxx(value){
			//=>value是this.$emit时候传递的第二个参数值
		}
	}
});

通知自定义事件执行（子）

{
	methods:{
		xxx(){
			this.$emit('func',10);
		}
	}
}

也可以基于此方法实现兄弟组件（父子组件、隔代组件）之间的信息通信
let eventBus=new Vue; //=>创建事件总线

//A组件
eventBus.$on('xxxA',this.func);

//B组件
eventBus.$emit('xxxA');

ref 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；
    如果用在子组件上，引用就指向组件实例，基于此可以快速获取和操作子组件中的数据

$parent和$children是获取组件和子组件的实例，
只不过$children是一个数组集合，
需要我们记住组件顺序才可以

{
	provide:{ 
    //=>对象或者返回对象的函数都可以（属性值如果是data中的数据，则必须使用函数的方法进行处理）
		name:'haha',
		year:10
	},
	...
}

{
	inject:['name'],
	methods:{
		func(){
			let name=this.name;
		}
	}
}