$refs、$parent、$children的使用

$refs

作用

获取对应组件实例，如果是原生dom，那么直接获取的是该dom。获取之后我们可以使用它的属性和方法。

使用方法：

//  我们需要获取实例ref （dom）

<my-component ref="myRef"></my-component>


//  然后我们在js中通过$refs方式获取该实例

this.$refs.myRef

然后就可以调用属性或者方法

let  name = this.$refs.myRef.name
this.$refs.myRef.getSonMsg()

 

注意：

1、如果你在mounted里获取this.$refs，因为dom还未完全加载，所以你是拿不到的， update阶段则是完成了数据更新到 DOM 的阶段(对加载回来的数据进行处理)，此时，就可以使用this.$refs了

 

2、如果写在method中，那么可以使用 this.$nextTick(() => {}) 等页面渲染好再调用，这样就可以了

 

$parent

使用范围：

该属性只针对vue组件，与js中parentNode还是有区别的。

$parent: 获取父组件实例。

$parent: 获取父节点。

作用：

获取父组件实例，同样，获取之后我们可以使用它的属性和方法。

使用方法：

//  父组件中
<template>
    <my-component></my-component>
</template>
<script>
    export default{
        data(){
            return{
                num: ''
            }
        }
    }
</script>

//  子组件中
<template>
    <div>我是子组件</div>
    <el-button @click="getParent"></el-button>
</template>
<script>
    export default{
        data(){},
        methods:{
            getParent(){
                //  通过$parent我们可以获取父组件实例，并将他的属性num改为1
                this.$parent.num = 1
            }
        }
    }
</script>

如果子组件是公共组件，会被多个父组件调用，那么$parent会怎么获取？改变他们的属性将会怎么变化？父组件中没有这个属性怎么办？

1. 针对不同父组件调用，子组件会每次都会生成一个实例，这也是Vue的重要机制。$parent会获取每个调用它的父组件实例。
2. 子组件中通过$parent会改变每个调用它的父组件中的对应属性。

$children

使用范围：

该属性只针对vue组件，与js中childNodes还是有区别的。

$children: 获取子组件实例集合。

childNodes: 获取子节点集合。

作用：获取父组件下的所有子组件实例，返回的是一个数组。

使用方法：

//  父组件中
<template>
    <A></A>
    <B></B>
</template>
<script>
    export default{
        data(){},
        mounted(){
            //  通过$children可以获取到A和B两个子组件的实例
            console.log('children:',this.$children)
        }
    }
</script>

this.$children[0]就能获取相应的组件