Vue 调用子组件、父组件、兄弟同级组件、任意组件方法

一、父组件调用子组件方法：

父组件P的HTML构成如下，想调用子组件C的c_method方法，首先给子组件定义ref属性：

<!-- P.vue -->
<template>
	<C ref="C"/>
</template>

JS定义一个child_C_method方法，使用

this.$refs.C

来获取子组件对象，也可以用

this.$refs[“C”]

来获取：

child_C_method () {
	this.$refs.C.c_method()
	// this.$refs["C"].c_method()
},

---

二、子组件调用父组件方法：

父组件P的HTML构成如下：

<!-- P.vue -->
<template>
	<C ref="C"/>
</template>

JS如下，其中子组件C想调用p_method:

p_method (a,b,c) {
	...
},

首先在父组件调用子组件的标签处，添加属性

<!-- P.vue -->
<template>
	<C ref="C" @child_p_method="p_method"/>
</template>

其中，child_p_method是父组件方法p_method在子组件中的别名，即在子组件调用处使用this.$emit方法即可：

c_method (d,e,f) {
	this.$emit("p_method",d,e,f);
},

其中d，e，f是实参。

---

三、兄弟同级组件、任意组件相互调用方法：

对于兄弟组件：

<!-- P.vue -->
<template>
	<C1 @child_p_method="p_method"/>
	<C2 ref="C2"/>
</template>

子组件C1要调用C2的c2_method方法，首先让父组件调用c2_method，在p_method中调用（一），然后C1调用父组件的p_method方法（二）。

对于任意组件，只要存在血缘关系，都可以使用（一）（二）情形组合解决。

血缘关系：父子关系属于最亲的血缘关系；只要从组件包含的关系上看，有共同的祖先，都属于有血缘关系的组件。