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>