vue --ref的使用

虽然 Vue 的声明式渲染模型为您抽象了大部分直接的 DOM 操作，但在某些情况下，我们可能仍然需要直接访问底层 DOM 元素。为了实现这一点，我们可以使用特殊属性：ref

模板参考 |Vue.js (vuejs.org)

---

ref是一个特殊属性，类似于本章中讨论的属性。它允许我们在挂载特定 DOM 元素或子组件实例后获得对它的直接引用。例如，当您希望以编程方式将输入集中在组件挂载上，或在元素上初始化第三方库时，这可能很有用。key v-for

---

<template>
  <div class="app">
    <h2 ref="title" class="title" :style="{ color:titleColor }">{{ message }}</h2>
    <button ref="btn" @click="changeTitle">修改title</button>

    <banner ref="banner"></banner>
    <banner ref="banner"></banner>
  </div>
</template>

<script>
import Banner from './Banner.vue'

export default {
    components:{
      Banner,
    },
    data(){
      return {
        message:"Hello world",
        titleColor:"red",
      }
    },
   methods:{
    changeTitle(){
        // const titleE1= document.querySelector(".title")
        // titleE1.textContent="你好"
        // this.titleColor="blue"

        //获取h2和button元素
        console.log(this.$refs.title)//访问元素
        console.log(this.$refs.btn)
        console.log(this.$refs.banner)

        //在父组件中可以主动调用子组件的对象方法，banner.vue中的bannerClick
        this.$refs.banner.bannerClick()

        //获取banner组件实例，获取banner元素
        console.log(this.$refs.banner.$el)

        //如果banner template是个多根，拿到的是第一个node节点
        console.log(this.$refs.banner.$el.nextSibling)
        //this.$refs 是一个对象，它包含了注册了 ref 特性的所有 DOM 元素和子组件实例
        //这行代码则是尝试访问这个根 DOM 元素的下一个兄弟节点。这里的 nextSibling 是一个原生 DOM API，
        // 它返回当前元素的下一个兄弟节点，如果当前元素没有下一个兄弟节点，则返回 null。

        console.log(this.$parent)//获取父组件 NULL  APP无父组件
        console.log(this.$root)//获取根组件 APP根组件还是自己
    }
   }
}
</script>

<style>

</style>

---

当在内部使用时，相应的 ref 应包含一个 Array 值，该值将在 mount 后用元素填充：refv-for

<script setup>
import { ref, onMounted } from 'vue'

const list = ref([
  /* ... */
])

const itemRefs = ref([])

onMounted(() => console.log(itemRefs.value))
</script>

<template>
  <ul>
    <li v-for="item in list" ref="itemRefs">
      {{ item }}
    </li>
  </ul>
</template>

---