不论是子组件还是父组件本质上来说他们类似于一个对象,我们不需要利用父子组件通信去交换什么数据或者信号,我们仅仅需要父组件直接访问子组件,子组件直接访问父组件,或者是子组件访问根组件,从而可以相互得到对方组件里的数据和方法
,那么不必用之前的prop和自定义事件.
this.$parent
this.$root
this.$children
或this.$refs
我们在父组件js中使用$children可以获得所有的子组件
,该组件所有的子组件为成为一个数租里的元素,我们可以通过该数组一个个的访问子组件,
缺点:无法特指某一个组件,优点:可以一次性获取所有的子组件
我们使用this.children得到的是所有的子组件组成的数组,我们可以用其获得一些组件内的数据比如this.children[0].name,是获取第一个子组件定义的name属性的值. 我们也可以用如下for函数来遍历每一个子组件元素,调用子组件的getValue(方法);
for (let c of this.$children) {
console. log(c. getValue())
}
如上我们所看,children有一个缺点,无法特指某一个组件,如果我们想获得某一组件必须用children[索引号]去特别指定,但是我们开发时候可能随时来需求改组件,那么组件位置或者序号就会变化,那么通过原来的索引号就无法正常取得数据了
因此refs就显得十分必要,我们可以在子组件引用时在其标签上加上引用名,然后即可在父组件中通过this.refs.引用名.属性名/方法名去获取特定组件的属性值或者调用其方法.如下图通过点击父组件内的button按钮调用子组件的方法.
如下图,我们可以通过`$this.parent'获取父组件,可以继续往下调用父组件的属性和方法.
但是我们开发时候一般不建议这样使用,因为我们用组件化开发一般是为了复用,如果我们在组件内定义了调用父组件的方法,但是用在不同位置的组件有不同的父组件,这样就会出现问题了.
这样获得的是根Vue实例,可以当做使用父组件一样使用,调用方式如下