Vue2.0子同级组件和父子组件之间数据交互

闲话少说，直接上代码

1.同级组件之间数据交互

<div id="app">
	<bus-list></bus-list>
	<com-table></com-table>
</div>
/-------js--------/
<script type="text/javascript">
var vm=new Vue();        //创建中央通讯vm,各组件可自己定义好组件内接收外部组件的消息事件即可，不用理会是哪个组件发过来；而对于发送事件的组件，亦不用理会这个事件到底怎么发送给我需要发送的组件
Vue.component("bus-list",{
	data:function(){
		return{
			dataList:["李小龙","成龙","狄龙","梁小龙"]
		}
	},
	template:'<div><span>这是兄弟一</span><button @click="sendData">发送数据</button></div>',
	methods:{
		sendData:function(){
			vm,$emit("recive",this.dataList);
		}	
	}
})

Vue.component("com-table",{
	data:function(){
		return{
			val:"",
			list:[]
		}
	},
	template:'<div><ul v-if="list.length>0"><li v-for="(item index) in list" :key="index">{{item}}</li></ul></div>',
	mounted:function(){
		var self=this;
		vm.$on("recive",function(msg){
			self.list=msg;
		})
	}
})

new Vue({
	el:"#app",
	data:{}	
})
</script>

2.父子组件之间数据交互

<div id="app">
	<list-parent :type-name="type"  :list="lists" val="提交"></list-parent>
<div>
<script type="text/javascript">
	Vue.component("list-parent",{
		props:["typeName","list","val"],
		data:function(){
			return{
				val:""
			}
		},
		template:'<div><input type="typeName" :value="val"><button @click="sendData">{{val}}</button><ul-list :li-list="list" @sendData="changeVal"></ul-list></div>',
		methods:{
			changeVal:function(value){
				this.val=value;
			},
			sendData:function(){
				this.val="";
			}
		}
	})
	Vue.component("ul-list",{
		props:["liList"],
		template:"<ul><li v-for='(item index) in liList' :key='index' @click='clickLi(item)'>{{item}}</li></ul>",
		methods:{
			clickLi:function(item){
				this.$emit("sendData",item);
			}
		}
	})
	new Vue({
		el:"#app",
		data:{
			type:"text",
			lists:["赌神","赌圣","赌侠","赌王"]
		}
	])
</script>