vue 组件通讯

user.vue

<template>
	<view> 
		 <div class="hello">
			<p>{{subTitle}}</p>
		    <ul>
		      <li v-for="user in users" @click="choose(user)">{{user}}</li><!-- //遍历传递过来的值，然后呈现到页面 -->
		    </ul>
		  </div>
	</view>
</template>

<script>
	export default { 
		props:{
			users:{           //这个就是父组件中子标签自定义名字
				type:Array,
				required:true
			}
		},
		data(){return {}},
		methods:{
			choose(data){this.$emit("onChoose",data)}
		},
		 inject: ['subTitle'],
		 mounted () {
		    console.log(this.subTitle);
		 }
	}
</script>

<style>
.hello{background-color: #C0C0C0;}
.hello ul li {cursor: pointer;}
</style>

parent.vue

<template> 
	<view> 
		<h1>你的名字：<span>{{name}}</span></h1>
		<users v-bind:users="arr" v-on:onChoose="changeVal"></users>
	</view>
</template>

<script>
	//import Users from '@/components/test/users.vue'
	import Users from './users.vue' 
	export default {
		name:"parent",
		components:{Users},
		data() {
			return {
				name:"",
				//1. 父组件向子组件传递数据 		props 属性， v-bind:users
				arr:["Henry","Bucky","Emily"],
				//2.子组件向父组件传值 			事件驱动   
				//2.1	子组件：$emit("onChoose",data)
				//2.2	当前组件：v-on:onChoose="changeVal"
				//3.空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级
				//3.1   var Event=new Vue(); //子组件需要都能访问该变量
				//	    Event.$emit(事件名,数据);
				//		Event.$on(事件名,data => {});
				//4. provide/inject
			};
		}
		,methods:{
			changeVal(data){
				console.log('你的选择：'+data);
				this.name=data;
			}
		}
		, provide: {
			subTitle: '请选择'
		}
	}
</script>

<style>
h1 span{color: red;}
</style>