[vue3]组件操作Dom元素,多个同名ref时的解决方法,返回了proxy对象时的使用

/ 3,244评论 / 19372阅读 / 5点赞

1. 原生js中我们会使用document.getElementsByClassName(),document.getElementById()等获取dom元素,但在vue中,更推荐使用ref获取。

2. 不同文件的ref相互独立,即使同名也不会互相影响而导致获取错误。一个组件被多次引用后同时存在多个实例时,每个实例的ref也是互相独立的。这一点显然比getElementById()要好很多。

3. 标签的ref属性值在每一个vue文件中需要是唯一的,否则可能在获取时发生与预期不同的效果。显然使用v-for时如果单项带有ref就需要我们解决这个问题。

使用ref绑定Dom元素

<template>
    <span id="myspanid" ref="mySpanRef">hello coolight</span>
</template>

获取

获取的方式很多,这里介绍其中的几种,以及提及一些document的方法和注意事项

祖传getElementById()

<script setup>
import { onMounted } from "vue";

let span_id = document.getElementById("myspanid");
console.log("setup: span_id = ", span_id);

onMounted(() => {
    console.log("onMounted: span_id = ", span_id);
    span_id = document.getElementById("myspanid");
    console.log("onMounted: span_id = ", span_id);
})
</script>

<template>
    <span id="myspanid" ref="mySpanRef">hello coolight</span>
</template>

ref(null)

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

let mySpanRef = ref(null);
console.log("setup: mySpanRef = ", mySpanRef);
console.log("setup: mySpanRef.value = ", mySpanRef.value);

onMounted(() => {
    console.log("读取setup获取的mySpanRef:");
    console.log("onMounted: mySpanRef = ", mySpanRef);
    console.log("onMounted: mySpanRef.value = ", mySpanRef.value);
    mySpanRef = ref(null);
    console.log("读取onMounted获取的mySpanRef:");
    console.log("onMounted: mySpanRef = ", mySpanRef);
    console.log("onMounted: mySpanRef.value = ", mySpanRef.value);
})
</script>

<template>
    <span ref="mySpanRef">hello coolight</span>
</template>
<script setup>
import { ref, onMounted } from "vue";

const mySpanRef = ref(null);

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

<template>
    <span ref="mySpanRef">hello coolight</span>
</template>

$refs.refName

<script setup>
import { onMounted, getCurrentInstance } from "vue";

let mySpan;

onMounted(() => {
    let { $refs } = (getCurrentInstance()).proxy;
    mySpan = $refs.mySpanRef;
    console.log("onMounted: mySpan = ", mySpan);
})
</script>

<template>
    <span ref="mySpanRef">hello coolight</span>
</template>

$refs[refName]

<script setup>
import { onMounted, getCurrentInstance } from "vue";

let mySpan;

onMounted(() => {
    let { $refs } = (getCurrentInstance()).proxy;
    let name = "mySpanRef";
    mySpan = $refs[name]; 
    //mySpan = $refs['mySpanRef'];      //这个也是可以的
    console.log("onMounted: mySpan = ", mySpan);
})
</script>

<template>
    <span ref="mySpanRef">hello coolight</span>
</template>

多个同名ref的解决方法

上面我们都是把ref当成id一样使用,但在v-for后产生的列表项可能遇到ref重复,下面我们聊聊如何解决这个问题

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

let mySpanRef = ref(null);

onMounted(() => {
    console.log("ref(null) = ", mySpanRef.value);
    let { $refs } = (getCurrentInstance()).proxy;
    mySpanRef = $refs.mySpanRef;
    console.log("$refs.mySpanRef = ", mySpanRef);
    mySpanRef = $refs['mySpanRef'];
    console.log("$refs['mySpanRef'] = ", mySpanRef);
})
</script>

<template>
    <div>
        <span ref="mySpanRef">hello coolight</span>
        <span ref="mySpanRef">hello 洛天依</span>
    </div>
</template>
<script setup>
import { onMounted, getCurrentInstance } from "vue";

let arr = ['coolight', '洛天依', 'enter', 'shift', 'ctrl', 'Alt', 'ESC'];

onMounted(() => {
    let { $refs } = (getCurrentInstance()).proxy;
    console.log($refs['myspan0']);
    console.log("for:");
    for(let i = arr.length; i-- > 0;) {
        console.log($refs['myspan'+ i][0]);
    }
})
</script>

<template>
    <div style="display:flex;flex-direction: column;">
        <span v-for="(item, index) in arr"
            :ref="'myspan' + index">{{index}}:{{item}}</span>
    </div>
</template>

其他问题

返回的是一个proxy对象

let { $refs } = (getCurrentInstance()).proxy;
let dom = $refs['myul'];    //proxy对象
dom.$el;                    //标签内容
dom.$el.clientWidth;        //通过$el即可同getElementById()获取到的标签一样操作
  1. AllenTal说道:

    Pharmacie en ligne livraison Europe: pharmacie en ligne – pharmacie en ligne france fiable

  2. Edwardcit说道:

    pharmacie en ligne: kamagra en ligne – Pharmacie en ligne livraison Europe

  3. RobertDer说道:

    http://phenligne.com/# Pharmacie en ligne livraison Europe

  4. AllenTal说道:

    Quand une femme prend du Viagra homme: Viagra sans ordonnance 24h – Viagra homme prix en pharmacie sans ordonnance

  5. Edwardcit说道:

    п»їpharmacie en ligne france: levitra generique prix en pharmacie – Pharmacie sans ordonnance

  6. Keithhak说道:

    Acheter viagra en ligne livraison 24h Viagra homme sans prescription Viagra gГ©nГ©rique sans ordonnance en pharmacie

  7. Edwardcit说道:

    trouver un mГ©dicament en pharmacie: kamagra 100mg prix – pharmacie en ligne france fiable

  8. AllenTal说道:

    pharmacie en ligne pas cher: Levitra sans ordonnance 24h – pharmacie en ligne

  9. IgnacioGinia说道:

    pharmacie en ligne pas cher: pharmacie en ligne pas cher – Achat mГ©dicament en ligne fiable

  10. Keithhak说道:

    pharmacie en ligne france livraison belgique pharmacie en ligne pas cher trouver un mГ©dicament en pharmacie

  11. IgnacioGinia说道:

    vente de mГ©dicament en ligne: Levitra 20mg prix en pharmacie – pharmacie en ligne france fiable

  12. IgnacioelOrb说道:

    Pharmacie Internationale en ligne: Acheter Cialis 20 mg pas cher – pharmacie en ligne

  13. Edwardcit说道:

    pharmacie en ligne france livraison internationale: п»їpharmacie en ligne france – Achat mГ©dicament en ligne fiable

  14. AllenTal说道:

    Viagra sans ordonnance livraison 24h: Viagra sans ordonnance 24h – Viagra sans ordonnance 24h suisse

  15. IgnacioelOrb说道:

    vente de mГ©dicament en ligne: cialis sans ordonnance – Pharmacie Internationale en ligne

  16. Edwardcit说道:

    Viagra femme ou trouver: Acheter du Viagra sans ordonnance – Viagra homme sans ordonnance belgique

  17. Your style is so unique compared to other people I
    have read stuff from. Many thanks for posting when you have the opportunity, Guess I’ll
    just bookmark this page.

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注