2026-08-05 13:10:36

不论是子组件还是父组件本质上来说他们类似于一个对象,我们不需要利用父子组件通信去交换什么数据或者信号,我们仅仅需要父组件直接访问子组件,子组件直接访问父组件,或者是子组件访问根组件,从而可以相互得到对方组件里的数据和方法,那么不必用之前的prop和自定义事件.

一 .Vue提供了一些的方法可以达到父子互相访问的效果. 父组件访问子组件:使用this.children或refs this.子组件访问父组件:使用this.$parent子组件访问根Vue实例:使用this.$root二 .父组件访问子组件:使用this.$children或this.$refs $children (批量获得子组件)我们在父组件js中使用$children可以获得所有的子组件,该组件所有的子组件为成为一个数租里的元素,我们可以通过该数组一个个的访问子组件,缺点:无法特指某一个组件,优点:可以一次性获取所有的子组件

我们使用this.children得到的是所有的子组件组成的数组,我们可以用其获得一些组件内的数据比如this.children[0].name,是获取第一个子组件定义的name属性的值. 我们也可以用如下for函数来遍历每一个子组件元素,调用子组件的getValue(方法);

代码语言:javascript复制for (let c of this.$children) {

console. log(c. getValue())

} $refs (常用)如上我们所看,children有一个缺点,无法特指某一个组件,如果我们想获得某一组件必须用children[索引号]去特别指定,但是我们开发时候可能随时来需求改组件,那么组件位置或者序号就会变化,那么通过原来的索引号就无法正常取得数据了

因此refs就显得十分必要,我们可以在子组件引用时在其标签上加上引用名,然后即可在父组件中通过this.refs.引用名.属性名/方法名去获取特定组件的属性值或者调用其方法.如下图通过点击父组件内的button按钮调用子组件的方法.

三.子组件访问父组件 this.$parent如下图,我们可以通过`$this.parent'获取父组件,可以继续往下调用父组件的属性和方法.

但是我们开发时候一般不建议这样使用,因为我们用组件化开发一般是为了复用,如果我们在组件内定义了调用父组件的方法,但是用在不同位置的组件有不同的父组件,这样就会出现问题了.

四 子附件访问根组件 this.$root 这样获得的是根Vue实例,可以当做使用父组件一样使用,调用方式如下

Copyright © 2088 次元时空特惠站 - 二次元游戏活动特区 All Rights Reserved.
友情链接