09组件，子组件与父组件的相互传值

父组件向子组件传值

<div id="app">
			<!--<myvues></myvues>-->
			<!--传的动态的值v-bind绑定《msg-->
			<myvue v-bind:a="msg"></myvue>
		</div>
		<!--<div id="con">
			<myvue></myvue>
		</div>-->
		<script type="text/javascript">
			Vue.component("myvue",{
				//接收父元素的值
				props:["a"],//父组件向子组件传值
				template:"<h1>{{a}}我的自定义全局组件</h1>"
			});
			var app=new Vue({
				el:"#app",
				data:{
					msg:"父组件的值"
				},
				components:{
					myvues:{
						template:"<a>我的局部自定义组件</a>"
					}
				}
			})
			var con=new Vue({
				el:"#con",
				data:{
					
				}
			})
		</script>

子组件向父组件传值

<div id="app">
			<!--一开始默认值是父组件的msg的值，点击后改变为接收的子组件的值-->
			<div>{{msg}}</div>
			<!--  03获取子组件的template    点击后将c的数据传给父组件的getChildVal-->
			<!--getChildVal是父组件的东西-->
			<!--@c是事件，通过$emit触发-->
			<btn @c="getChildVal"></btn><!--getChildVal是父组件接收的子组件的值-->
		</div>
		<script type="text/javascript">
			//子组件向父组件传值
			Vue.component("btn",{
				//01  在子组件中做事件绑定，cha得到自定义事件的子组件的值
				template:"<button @click='cha'>点击获取子组件的值</button>",
				//02子组件传给父组件的数据
				data:function(){
					return {
						childVal:"我是子组件的值"
					}
				},
				methods:{
					//04  把数据传给父组件
					cha:function(){
						//子组件可以使用 $emit 触发父组件的自定义事件。 $emit必须要有原生的事件触发
						//通过emit触发父组件的自定义事件this.$emit(自定义事件名称，传递的数据)
						//把return的值传进这里面
						this.$emit("c",this.childVal)
					}
				}
			})
			var app= new Vue({
				el:"#app",
				data:{
					//父组件做接收的值
					msg:"父组件的值"
				},
				//获取子组件的值
				methods:{
					//message接收的是@c的值
					getChildVal:function(messages){
						//接收子组件传递过来的值
						this.msg=messages;
					}
				}
			})
		</script>