$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]就能獲取相應的組件