vue组件通信，子组件往父组件传递数据。

实现是this.$emit(‘随便定义的方法名’,要穿的参数); 来实现的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<div id="app">
			<cpn @fclick="fclick1"></cpn>
		</div>
		<template id="cpn">
			<div>
				<button v-for="item  in books"
				 @click="cclick(item)">{{item.name}}</button>
			</div>
		</template>
	</head>
	<body>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			//定义一个子组件  
			const cpn={
				template:'#cpn',
				data(){
					return {
						books:[
						  {
							  id:'11',
							  name:'二十四史'	
						  },
						  {
							  id:'12',
							  name:'史记'
						   }
						]
					}
				},
				methods:{
					cclick(item){
						// console.log(item);
						//自定义事件
						this.$emit('fclick',item);
					}
				}
			}
			//将vue作为父组件
			const  app = new Vue({
				el:'#app',
				data:{
					
				},
				components:{
					cpn
				},
				methods:{
					fclick1(item){
						console.log(item);
					}
				}
			})
			/**
			 * 总结子组件往父组件传递数据
			 * 1.先定义一个子组件和父组件
			 * 2.在子组件中定义一个方法，方法中定义一个函数。
			 * 用 this.$emit('随便定义的方法名',要穿的参数);
			 * 3.在子组件中定义一个点击事件，这个事件也就是对应第2步的方法。
			 * 4.在父组件的作用域中的子组件标签上用v-on监听this.$emit('随便定义的方法名',要穿的参数);中
			 * 的'随便定义的方法名'如此例子的
			 * 	<cpn @fclick="fclick1"></cpn>
			 * fclick=随便定义的方法名,
			 * fclick1为父组件中定义的接收子组件传递参数的方法。
			 */
		</script>
	</body>
</html>