Vue | Vue 中的 refInForde 用法

news2024/11/24 13:06:08

refInFor：如果你在渲染函数中给多个元素都应用了相同的 ref 名，那么 `$refs.myRef` 会变成一个数组。

vue中的refInFor属性是Vue框架中用于在循环渲染的元素上设置引用的一种方式。‌

在Vue中，‌ref属性通常用于给元素或子组件注册引用信息，‌这些引用信息会注册在父组件的$refs对象上。‌如果是在普通的DOM元素上使用，‌引用指向的就是DOM元素；‌如果是在子组件上，‌引用就指向组件的实例。‌当在子组件或者DOM元素上写ref="xxx"时，‌Vue实例上就有了一个$refs属性，‌包含了所有注册过ref的DOM对象。‌通过$refs，‌我们可以直接访问到这些DOM元素或子组件实例，‌从而进行直接操作或访问它们的属性和方法。‌

在循环渲染的场景中，‌如果需要在循环内部使用ref来引用某个元素或组件，‌并且希望这个引用在循环外部也是可访问的，‌就需要使用refInFor属性。‌这个属性确保了在循环中设置的引用不会因为每次循环都创建一个新的引用对象而导致无法正确访问。‌通过在循环中的元素上设置ref="someRef"和refInFor属性，‌可以在循环外部通过this.$refs.someRef访问到所有循环中创建的元素或组件的引用集合。‌

这种用法在需要遍历列表并对每个元素进行特定操作时非常有用，‌例如，‌当需要动态地改变列表中某些元素的样式或状态时，‌可以通过refInFor来引用这些元素，‌并在父组件中通过this.$refs来访问和操作它们。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
  <h1>vue TODO</h1>
  <my-todo v-bind:items="todoList">
  </my-todo>
  <hr>
  <h2>v-for 和 ref 结合使用</h2>
  <ul>
    <todo ref="li" v-for="(item,i) in todoList" :key="i" :todo="item.do"></todo>
  </ul>
</div>
<template id="tempA">
    <div>
        <span>{{datas.isa}}</span>
    </div>
</template>

<script src="vue.min.js"></script>
<script>
  Vue.component("todo", {
    props: ["todo"],
    render(h) {
      return h("li", this.todo);
    }
  });
  Vue.component("my-todo", {
    props: ["items"],
    render(h) {
      console.log("my-todo");
      if (this.items.length) {
        const todo = this.items.map((item) => {
          return h("todo", {
            props: { todo: item.do },
            ref: "ref-li",
            refInFor: true // 使用map生成一个vNode数组，开启 refInFor: true，this.$refs.["ref-li"] 是一个数组
            // refInFor 如果不开启，获取到的是最后一个元素或者子组件
          });
        });
        return h("ol", todo);
      } else {
        return h("p", "no todo");
      }
    },
    mounted() {
      // 在父组件中获取注册了 ref 特性的子组件的
      console.log(`this.$refs["ref-li"]`)
      console.log(this.$refs["ref-li"]);//数组
    }
  });
const app = new Vue({
  el: "#app",
  data: {
    todoList: [{ do: "eat" }, { do: "code" }]
  },
  mounted() {
    console.log("app");
    console.log("this.$refs.li")
    console.log(this.$refs.li)
  }
});
</script>
</body>
</html>

参考资料

Vue官网——API — Vue.js | Vue之render函数_Vue.js——博客园

Vue 中的Render全面详解 (渲染函数&JSX)-CSDN博客 | Vue中的render函数-CSDN博客

轻松掌握 Vue render 函数：简单易懂的使用指南 | Vue中渲染函数（render）的介绍和应用

vue 中的 render 函数作用详解_vue.js_脚本之家 | Vue render函数使用详细讲解_vue.js_脚本之家