Vue-cli中 $ref 的基本用法

對於ref官方的解釋是：ref 是被用來給元素或子組件註冊引用信息的。引用信息將會註冊在父組件的 $refs 對象上。

我的解釋：

1、如果ref用在子組件上，指向的是組件實例，可以理解爲對子組件的索引，通過$ref可能獲取到在子組件裏定義的屬性和方法。

2、如果ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通過$ref可能獲取到該DOM 的屬性集合，輕鬆訪問到DOM元素，作用與JQ選擇器類似。

以下是vue實例中的案例：

父組件：

<template>
    <div>
      <h1 ref="h1text">這是H1</h1>
      <Demo ref="demo"></Demo>
      <button @click="getref">獲取H1元素</button>
    </div>
</template>

<script>
  import Demo from './demo'  //引入子組件
    export default {
        name: "index",
      components:{
        Demo  //註冊組件
      },
      data(){
          return{

          }
      },
      methods:{
        getref(){
        // 表示從 $refs對象 中, 獲取 ref 屬性值爲: h1ele DOM元素或組件
          console.log(this.$refs.h1text.innerText);
          this.$refs.h1text.style.color = 'red';// 修改html樣式
          console.log(this.$refs.demo.msg);// 獲取組件數據
          console.log(this.$refs.demo.test);// 獲取組件的方法
        }
      }
    }
</script>

<style scoped>

</style>

子組件：

<template>
    <div>
        <h3>我是demo組件</h3>
      <button @click="test">我是demo組件的方法</button>
      <h5>{{msg}}</h5>
    </div>
</template>

<script>
    export default {
        name: "demo",
      data(){
        return{
          msg:'測試'
        }
      },
      methods:{
        test(){
          alert('我是demo組件的彈框')
        }
      }
    }
</script>

<style scoped>

</style>

這是打印出來的結果：

以上是本章的全部內容