vue之组件通信

1.父向子传值——props
2.子给父传值——$emit(name,data)
3.父直接读子方法或字段——ref
4.vuex（该方法已详细介绍，可查看之前文章）
子组件示例：

<template>
	<div @click="open">{{childData}}</div>
	<div @click="close">hello world</div>
</template>

<script>
export default{
	name:'child',
	props: ['childData'],
	data(){
		return{
			name:'子组件'
		}
	},
	methods:{
		open(){
			//该方法意指将open方法暴露给父组件，closeMark可自定义名字
			 this.$emit('closeMark',this.name)  //不用传值可以不写this.name
		},
		close(){
			//该方法将用于演示父组件直接调用
			this.name='父组件改变了我'
		},
	}
}
</script>

父组件示例：

<template>
	<div @click="giveMoney">我！秦始皇！打钱！</div>
	<child @closeMark="fatherClick" :childData="datas" ref="children" />
</template>

<script>
import child '@/views/child.vue'
export default{
	props: ['childData'],
	data(){
		return{
			datas:'父组件'
		}
	},
	methods:{
		giveMoney(){
			this.$refs.children.close() //父组件可通过该方法直接调用子组件的事件
			this.$refs.children.name='迪迦' //也可以直接操作子组件data，该方法过于粗暴不建议使用！
		},
		fatherClick(name){
			//name即子组件通过open事件传递过来的值
			this.datas=name
		},
	},
	//子组件别忘了在这里注册一下！！！
	components:{
		child 
	}
}
</script>

Tips：注意！这里的ref方法有一个注意点，拿好小本本准备做笔记了。如果子组件是根据需求动态渲染，比如加上了v-if，则this.$refs.children会报错Undefined，这是因为父组件挂载时子组件还未渲染，可以改成v-show，如果还有其他方法欢迎补充~