Vue.js中父组件直接调用子组件&子组件直接调用父组件&子组件直接调用其他组件（$refs $root 等实例属性）

最新推荐文章于 2024-07-05 09:04:25 发布

万事兴隆Vip

最新推荐文章于 2024-07-05 09:04:25 发布

阅读量747

点赞数

文章标签： Vue.js JavaScript 组件之间直接调用

本文链接：https://blog.csdn.net/relong00/article/details/86672026

版权

Vue.js的API真的很好，Vue实例的共有属性请从这里学习：https://cn.vuejs.org/v2/api/#vm-data

Vue.js中每一个组件都可以加入一个ref属性：

<dialog-comp ref="compDLG"></dialog-comp>
<dialog-comp v-bind:ref="compDLG"></dialog-comp>
<dialog-comp :ref="compDLG"></dialog-comp>

支持以上写法，可以静态创建ref属性，也可以动态创建ref属性（在某一个Vue组件实例内部使用$refs[只能时这个组件实例的子组件] ）。

1.父组件直接调用子组件

在父组件中直接使用：

this.$refs["compDLG"] // 得到compDLG的实例对象

var strTemp = "vueComp";
this.$refs[strTemp] // 得到vueComp的实例对象

2.子组件直接调用父组件

在子组件中直接使用：

// $root 正如前面Vue.js的API里写到的: 当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。
this.$root // $root指向当前组件树的根 Vue 实例

3.子组件直接调用其他组件

在子组件实例中直接使用：

// $root 正如前面Vue.js的API里写到的: 当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。
this.$root.$refs["compDLG"] // 获取compDLG的实例 $root是根实例，可以访问所有组件树的ref属性

PS：

自定义事件（子组件主动触发自定义事件调用父组件的函数进行通讯）

props（父组件设置子组件的props属性的值，子组件定义props属性来直接获取父组件传递的数据）

关注