vue父子组件通信实现过程

父组件->子组件

		<!-- 将父组件中的number传入子组件中 -->
		<div id="app">
			<child-a :a='number'></child-a>
		</div>
		<script>
			Vue.component('child-a', {
				template:`<p>我是一个子组件</p>`,
				props:['a'],
				//props:字符串数组
				//props中的数据的值来源于父组件
				//props数据中的用法和data中的数据用法完全一样
				//同时props中的数据也相当于该组件的属性，所以就可以传入父组件中data的值
			})
			var vm = new Vue({
				el:'#app',
				data:{
					number:200
				}
			})
		</script>

子组件->父组件

<!-- 通过this.$emit调用父组件的方法来向父组件传递参数 -->
		<div id="app">
			//定义一个事件 来让子组件调用事件方法
			<child2 @func='show'></child2>
		</div>
		//子组件模板
		<template id="tmpl">
			<div>
				<h1>这是子组件</h1>
				<input type="button" @click="myclick" value="" />
			</div>
		</template>
		
		<script>
			var child2 = {
				template:'#templ',
				data(){
					return {
						msg:'我是子组件的数据'
					}
				}
				methods:{
					myclick(){
						//当点击子组件的按钮时，调用父组件里的show方法并把子组件里的数据传入父组件
						//第一个参数是事件名称，之后添加的参数可以当作实参数据传入父组件的方法中
						this.$emit('func', this.msg)
					}
				}
			}
		  var vm = new Vue({a
				el:'#app',
				data:{
					number:200
				},
				methods: {
					show(data){
						console.log('调用了父组件身上的方法：-------'+ data)
					}
				}
				components:{
					child2
				}
			})
		</script>