父子组件的访问方式

不论是子组件还是父组件本质上来说他们类似于一个对象,我们不需要利用父子组件通信去交换什么数据或者信号,我们仅仅需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问根组件,从而可以相互得到对方组件里的数据和方法,那么不必用之前的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(方法);

for (let  c of this.$children) {
console. log(c. getValue())
}

• $refs (常用)

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

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

三.子组件访问父组件 this.$parent

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

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

四 子附件访问根组件 this.$root

这样获得的是根Vue实例,可以当做使用父组件一样使用,调用方式如下