vue的组件化开发（组件通信，插槽，递归组件）

1. vue组件的通信：包括子通父，父通子，兄弟通信，祖代与后代通信，vuex全局状态管理。 1.1 父向子通信：props属性和refs属性。

//在子组件中props:{age: {type: Number, //父组件传递过来age变量的类型,包括String、Number、Boolean、Array、Object、Date、Function、Symbol。default: 0, //默认值required: true, //是否必填validator: function (value) { //传递过来的值的校验。验证失败的时候，Vue 将会产生一个控制台的警告。return value >= 0}},age1:[Number,String], //存在多种类型。}//在父组件中<child :age='ageValue' :age1="age1Value"></child> <child :ref='childDom'></child>//通过this.$refs.childDom.xxx 调用子组件的方法/变量。 //子组件中this,$emit('send','这是子组件向父组件传递的数据');//父组件中<child @send='sendHandle'></child>sendHandle(val){ //父组件中监听子组件的传递的过来的值，并做响应的处理} //兄弟组件Athis.$parent.on('send',(res)=>{}); //监听当前实例的父组件由vm.$emit触发的自定义事件//兄弟组件Bthis.$parent.emit('send','B向A传递的数据'); //向 当前实例的父组件自定义广播事件和数据 //祖先组件provide(){return {foo:'这是要传递给后代的值'}}//后代（后N代）inject:['foo'] //获取祖先组件传递过来的foo值 import vue from "vue"vue.prototype.$bus=new Bus();//在一个任意组件中this.$bus.$on(eventName,(res)=>{})//在另一个任意组件中this.$bus.$emit(eventName,val);

1.4.2 vuex：复杂大型项目中。

//1. 写法：//1.1 匿名组件<slot></slot>//1.2 具名组件<slot name='box'></slot>//2.使用//2.1匿名组件的使用<div></div>//2.2 具名组件的使用<div slot='box'></div> <template><div><!--必须有结束递归结束条件--><my-node v-if='xxx' :data='xxx'></my-node></div></template><script>export default{name:"MyNode" //有name名且推荐首字母大写}</script>