vue 父子组件之间方法的调用总结

这里总结一下自己看到过的父子组件通信的各个方法：

1. 子组件调用父组件的方法：

1、$emit

// 父组件
<FillParam @addParam="parentFnc"></FillParam>
// 子组件中调用 parentFnc 方法
this.$emit('addParam', 参数1， 参数2，...)

2、 $listeners

// 父组件
<FillParam @addParam="parentFnc" @addParam2="parentFnc2"></FillParam>
// 当父组件里有多个方法时, 
console.log(this.$listeners) // {addParam: ƒ, addParam2: ƒ}

3、$parent

mounted() {
	console.log(this.$parent) // 能拿到父组件的方法
}

注意：这个方法只能拿到一级父组件的方法，不能保证顺序，也不是响应式的，所以不推荐使用

2. 父组件调用子组件的方法：

1. $refs

// 父组件
<Child :taskData="task" ref="child"></Child>
// 通过 $refs 找到子组件实例来调用子组件方法
this.$refs.child.childFnc(); // childFnc 为子组件方法

2. $children

mounted() {
	console.log(this.$children) // 能拿到子组件的方法
}

注意：第二个方法一般不推荐使用