Vue中父子组件通信

父组件向子组件通信

• 父组件向子组件传值

父组件father.vue中，绑定属性名valueName，值为value

<template>
	<children :valueName="value"></children>
</template>
<script>
import children from './children.vue'
export default {
	components: { children },
}
</script>

在子组件children.vue中，通过props来定义父组件中的属性名valueName，使用时用this.valueName即可

<script>
	export default {
		props: {
			//字符串类型
		    valueName: {
		    	type: String, //类型可以是Boolean、Object、Number、String | Number,Number、[String, Number]等等
		    	default: 'default',	//根据type来写
		    	required: false
		    },
		    //对象类型
	        valueObject: {
		        type: Object,
		        default: () => { },
		        required: false
	        },
		    //数字类型类型
	        valueNumber: {
		        type: Number,
		        default: 5,
	        },
		}
	}
</script>

• 父组件调用子组件方法

在父组件father.vue中，ref 被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的 $refs 对象上，多个子组件根据ref的值进行区分

<template>
	<children ref="children"></children>
</template>
<script>
import children from './children.vue'
export default {
	methods:{
		father(){
			console.log("调用子组件的childrenFunction方法！");
			this.$refs.children.childrenFunction();
		}
	}
}
</script>

在子组件children.vue中，childrenFunction将会被调用

methods: {
	childrenFunction(){
		this.$nextTick(() => {
			console.log("父组件调用子组件中的方法");
		})
	}
}

子组件向父组件通信

• 子组件触发父组件方法

在子组件children.vue中，通过this.$emit来触发父组件father.vue的事件

methods: {
	children(){
		this.$emit("ok");	//父组件的事件名称
	}
}

父组件father.vue中，当ok事件被触发则会执行父组件中的father方法

<template>
	<children @ok="father"></children>
</template>
<script>
import children from './children.vue'
export default {
	components: { children },
	methods: {
		father(){
			console.log("父组件中的方法被执行了！");
		}
	}
	
}
</script>

• 子组件向父组件传参

在子组件children.vue中，可以传递子组件中的参数

methods: {
	children(param){
		this.$emit("ok",param);	//传递参数
	}
}

在父组件father.vue中，接收子组件传过来的参数，加上$event，才可以在函数中获取参数

<template>
	<children @ok="father($event)"></children>
</template>
<script>
import children from './children.vue'
export default {
	components: { children },
	methods: {
		father(param){
			console.log("从自组件传递过来的参数：",param);
		}
	}
	
}
</script>