对于 Vue 中组件之间的简单通信的总结:

这篇文章是对于 Vue 中组件之间的简单通信的总结:

---

• 父子组件之间的通信 ---> props（父传子）

在vue中父子组件的关系可以总结为：props down , events up;

• -->父组件通过 props 向下把数据传给子组件

1. props:["name","age"];
2. prop验证-->不满足类型会报错 props:{name:String,age:Number} ;

<div id="box">
    <h3>父子组件之间的通信-->props（父传子）</h3>	
    <hello name="wuhao" age="23"></hello>
    <hello name="wenyan" age="19"></hello>	
</div>
		 
<script>		
var vm = new Vue({
	el:"#box",
	data:{},
	components:{
		"hello":{
		template:`<div>我是子组件--->{{name}}--->{{age}}</div>`,
        //props:["name","age"],
        //prop验证-->不满足类型会报错
	props:{
		name:String,
		age:Number
		} 
    }
 }
})
</script>

• -->子组件通过 events 向上把数据传给父组件

• props 属性名规则:

1. 在 props 中使用 驼峰 形式，模板中需要使用 短横线 的形式;
2. 字符串形式的模板中没有这个限制;
3. html模板中 短横线, props 和 模板字符串 中用 驼峰式;

• props 属性值类型:

1. 字符串 :    String ===========(普通类型)  :str="hello"；
2. 数值 :        Number =========(普通类型)  :num="12"；
3. 布尔值 :    Boolean =========(普通类型)  :bol="true"；
4. 数组 :        Array============(引用类型)；
5. 对象 :       Object============(引用类型)；

    注意: (前面加 ':' ,属性绑定，将内容做计算并且转换成对应的数据类型)；

<div id="app">
    <h3>父子之间通信(父传子)---props</h3>
	<menu-item title="来自父组件的值"></menu-item>
	<menu-item :title1="ptitle" content="我是内容"></menu-item>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{ptitle:"动态绑定属性"},
components:{
	"menu-item":{
	template:`
			<div>
				<p>{{title}}</p>
				<p>{{title1 + "=======" + content}}</p>
			</div>`,
	data:function(){
		return {
				msg:"子组件本身的数据"
				}
			},
		props:["title","title1","content"]
	}
}
})
</script>

• 父子组件之间通信 ---> 自定义事件 (子传父)

组件自定义事件：

• 父组件监听子组件的事件-->使用 $on(eventName) 监听事件；
• 子组件通过自定义事件向父组件传递信息-->使用 $emit(eventName) 触发事件；

<div id="box">
	<hello name="wuhao" @event="changeParent($event)"></hello><!-- @event自定义事件，监听 -->
	<p v-html="hello"></p><!-- $event固定用法，接受传过来的参数 -->
</div>
		
<script>
var vm = new Vue({//Vue对象
		el:"#box",
		data:{hello:""},
		components:{//组件
		   "hello":{
			template:`<div>我是{{name}}子组件
				           <button @click="change">click</button>
					  </div>`,
			props:["name"],
			methods:{//组件内普通方法
					change:function(){
					//分发事件
					this.$emit("event","来自子组件的问候");//触发事件
					}
				}
			}
		},
		methods:{//普通方法
			changeParent:function(data){//data接收传过来的参数值
			this.hello=data;
		}
	}
})

v-model实现:  实例链接

• 组件非父子通信：(中央事件总线 bus)  :  实例链接

1. 单独的事件中心管理组件间的通信 ---> var bus = new Vue()；
2. 监听事件和销毁事件 ---> 包含在  mounted  生命周期中 bus.$on("event",function(data){...}) ;  bus.$off("event")；
3. 触发事件 ---> bus.$emit("event",id);
4. 中央事件总线  bus = new Vue();  ---> mounted 生命周期中进行监听； ---> vuex状态管理(复杂时候用)

var bus = new Vue();
var vm = new Vue({
	el:"#box",
	data:{hello:""},
	components:{
		"helloa":{//同级组件
		template:`<div>我是子组件helloa
        <button @click="changeA">click</button>
				  </div>`,
		methods:{
		changeA:function(){
		//发送消息给组件hellob
		bus.$emit("xiaoming","来自组件a的问候！");
		}
	}		
},
	"hellob":{//同级组件
			template:`<div> 我是子组件hellob</div>`,
			mounted(){
            //mounted生命周期中进行监听,挂载的钩子函数
			//console.log("b组件的挂载的钩子函数");
			bus.$on("xiaoming",function(value){
			//console.log(value);
			document.querySelector("p").innerHTML = value;
			});
		}
	}
  }
})