vue父组件调用子组件方法this 指向问题_Vue实战030:子组件与父组件之间方法调用...

前面我分享了vue实战027:子组件和父组件之间传值，今天继续分享子组件与父组件之间方法调用，在项目实战中我们经常会遇到组件之间方法调用的情况。Vue同样为我们准备了相关的方法来实现，他们就是$root、$parent、$refs、$children属性，其中$root、$parent是子组件向父组件调用方法，而$refs、$children则是父组件向子组件调用方法。

$root与$parent的区别

$root：子组件通过使用$root属性可以直接访问到根组件实例(也就是最上层的一级父组件)，不管你当前在那个子组件中。

$parent：子组件通过使用$parent属性可以访问到最近的一级父组件(也就是相对于当前的上一层)，如果你想继续往上一级父组件访问，那么久可以使用this.$parent.$parent...方法来访问。

$refs与$children的区别

$refs：父组件通过$refs属性获取子组件实例，然后拿到子组件中的数据和方法。

$children:父组件通过$children属性获取子组件的一个数组，包含了该组件下的所有子组件。