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属性获取子组件的一个数组，包含了该组件下的所有子组件。

$root获取根实例中的数据或方法

这里的根实例指向了项目中的main.js文件，也就是当我们使用$root时会直接访问到main.js中的数据,我在main中定义一个数据和方法来测试(写在Vue的实例对象中，如下)。

new Vue({ data(){ return{ roots:'这时root中的数据' } }, methods:{ rootMethods(){ console.log('这是根实例中的方法') } }, router, store, render: h => h(App)}).$mount('#app')

前面我定义了一个roots参数和一个rootMethods方法，现在我在任意子组件中通过console.log("this.$root=