vue實例屬性-$refs和$el

關於$refs的官方介紹
一個對象，持有注冊過 ref attribute 的所有 DOM 元素和組件實例

關於$el的官方介紹

Vue 實例使用的根 DOM 元素

我們自己新建組件的時候，如何讓父組件直接觸發子組件的方法，比如父組件讓子組件的數據加1

父組件

<template>
  <div>
      <div class="parent">
      父組件
      <button @click="add">父組件按鈕讓子組件加一</button>
      <Child ref="addChild"></Child>
      </div>
  </div>
</template>

<script>
import Child from './components/Child.vue'

  export default {
    components:{
      Child
    },
    methods:{
      add(){
        console.log(this.$refs.addChild)
        this.$refs.addChild.add()
      }
    }
  }
</script>

<style  scoped>
.parent{
  width: 200px;
  height: 300px;
  padding: 0 50px;
  background: blue;
  color: white;
}
</style>

子組件

<template>
    <div>
        <div class="child">
        子組件數據{{a}}

        </div>
    </div>
</template>

<script>
    export default {  
        data(){
            return{
              a:100
            }
        },
        props:['name'],
        methods:{
add(){
    console.log(123)
    this.a++
},

        }
    }
</script>

<style scoped>
.child{
    width: 200px;
    height: 200px;
    background: orange;
}
</style>

需要注意的是$refs獲取的對象內容就是對應的ref屬性的實例

 

 

 

$refs屬性的內容包含了當前組件的所有dom和方法

此時我們在父組件中調用了子組件的add方法

methods:{
  add(){
    this.$refs.addChild.add()
  }
}

子組件中的方法

methods:{
    add() {
        console.log(123)
        this.a++
    }
    
}

此時我們看到觸發了子組件中的方法

 

 

 

如果一個頁面中有多個ref，此時會返回一個JSON對象，分別代表對應的ref實例

<template>
  <div>
      <div class="parent">
      父組件
      <button @click="add">父組件按鈕讓子組件加一</button>
      <Child ref="addChild1"></Child>
      <Child ref="addChild2"></Child>

      </div>
  </div>
</template>

 

 

 

 

如果ref對象不是一個自定義組件而是一個普通元素，返回的就是該元素本身

<div ref="Div">
我是div標簽
</div>

 methods:{
      add(){
        console.log(this.$refs.Div)
        // this.$refs.addChild.add()
      }
    }

 

 

 

 

 

此時思考一個問題，可以通過$refs去修改組件的樣式嘛？

 methods:{
      add(){
        console.log(this.$refs.addChild.style)
        // this.$refs.addChild.add()
      }
    }

按時瀏覽器卻返回的是undefined，因為$refs如果是一個組件，就沒有style樣式屬性，我們要想修改對應的組件樣式，需要通過$el

 

 

methods:{
      add(){
        console.log(this.$refs.addChild.$el)
        // this.$refs.addChild.add()
      }
    }

此時我們會發現這里返回的是一個根節點

 

 我們試一下

methods:{
      add(){
        console.log(this.$refs.addChild.$el.style="color:red")
        // this.$refs.addChild.add()
      }
    }

此時點記憶下，發現可以用$el來修改對應的組件樣式