vue组件间消息传递的2种方式

1. 父组件向子组件传递
父组件向子组件传递信息也可以叫属性下行，在子组件上绑定一个自定义属性，属性值为父组件的模型数据，然后子组件通过props属性来接收传过来的数据。

<div id="app">
	<parentComponent></parentComponent>
</div>

<div id="parent">
	<childComponent :liNum="liNum"></childComponent>
</div>

<ul id="child">
	<li v-for="i in liNum">
		{
     {
     i}}
	</li>
</ul>

<script>
	var parentComponent = {
     
		template:"#parent",
		data:function(){
     
			return {
     
				liNum:10
			}
		},
		components:[childComponent]
	}
	var childComponent = {
     
		template:"#child",
		props:["liNum"]
	}
	new Vue({
     
		template:"#app",
		components:[parentComponent]
	})
</script>

2. 子组件向父组件传递
子组件向父组件传递信息也可以叫事件下行，通过在子组件上绑定一个自定义事件，事件函数为父组件定义，最后在子组件内定义一个事件来触发自定义事件（this.$emit(“自定义事件”,“传递的数据”)）。

<div id="app">
	<parentComponent></parentComponent>
</div>

<div id="parent">
	<childComponent @childInfo="parentMe"></childComponent>
</div>

<div id="child">
	<button @click="info"></button>
</div>

<script>
	var parentComponent = {
     
		template:"parent",
		components:[childComponent],
		methods:{
     
			parentMe:function(d){
     
				alert(d);
			}
		}
	}
	var childComponent = {
     
		template:"child",
		data:function(){
     
			return {
     
				infoData:"hello world"
			}
		},
		methods:{
     
			info:function(){
     
				this.$emit("childInfo",this.infoData)
			}
		}
	}
	new Vue({
     
		template:"#app",
		components:[parentComponent]
	})
</script>