ref

2023年05月09日

柏拉文

越努力，越幸运

一、认识

---

ref 用于注册模板引用、用于注册元素或子组件的引用。

• 子组件: 引用是子组件实例

• 普通 DOM 元素: 引用将是元素本身

二、语法

---

2.1 选项式绑定

使用选项式 API，引用将被注册在组件的 this.$refs 对象里

<ComponentName ref="p" ></ComponentName>

export default{
    mounted(){
        consol.log(this.$refs.p);
    }
}

2.2 组合式绑定数据

<template>
  <div>
    {{ a }}
    <button @click="onChangeA">按钮</button>
  </div>
</template>

<script setup lang="ts">
import { ref, type Ref } from 'vue'

const a: Ref<string> = ref('哈哈哈')

const onChangeA = () => {
  a.value += '修改'
}
</script>

2.3 组合式静态绑定组件

<template>
  <Child ref="childRef" />
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Child from './components/Child.vue';

const childRef = ref(null);

onMounted(()=>{
  console.log(childRef.value)
});
</script>

2.4 组合式动态绑定组件

<template>
  <Child :ref="comp => setRef(comp, 'childRef')" />
</template>

<script setup>
import { reactive, onMounted } from 'vue';
import Child from './components/Child.vue';

const compRefMap = reactive({});

const setRef = (comp,key)=>{
  compRefMap[key] = comp;
  console.log(compRefMap)
}
</script>

2.5 组合式静态绑定DOM

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

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

const divRef = ref(null);

onMounted(()=>{
  console.log(divRef.value)
});
</script>

2.6 组合式动态绑定DOM

<template>
  <div :ref="(el)=> setRef(el, 'divRef')"></div>
</template>

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

const divRefMap = reactive({});

const setRef = (el,key)=>{
  divRefMap[key] = el;
  console.log(divRefMap);
};
</script>

三、场景

---

3.1 获取单个 DOM 元素

<template>
  <div>
    <div ref="xixi">嘻嘻</div>
    <div ref="haha">哈哈</div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const xixi = ref(null);
const haha = ref(null); 

onMounted(() => {
  console.log(xixi)
  console.log(haha)
})
</script>

3.2 获取多个 DOM 元素

如果直接通过 ref="listItemRef" 来获取 li 元素的话，也可以获取，但是是不保证顺序的。所以我们可以通过动态设置 :ref="(el) => setListItemRef(el, item.id)" 来控制 ref 值，可以有序的访问到 DOM 元素。

<template>
  <div>
    <ul>
      <li :key="item.id" v-for="item in list" :ref="(el) => setListItemRef(el, item.id)">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const list = ref([
  {
    id: 1,
    name: '哈哈'
  },
  {
    id: 2,
    name: '嘻嘻'
  },
  {
    id: 3,
    name: '呵呵'
  }
])

const listItemRef = ref<{ [key: number]: any }[]>([])

const setListItemRef = (dom: any, id: number) => {
  listItemRef.value.push({ [id]: dom })
  console.log(listItemRef)
}
</script>