Vue.js 中模板引用：让组件交互飞起来

2024-03-09 00:06:27

通过模板引用提升 Vue.js 组件的交互性

导言

在 Vue.js 中，模板引用是访问和操作 DOM 元素的强大工具。它们在创建交互式和动态组件方面发挥着至关重要的作用。

模板引用的工作原理

模板引用本质上是 DOM 元素的特殊引用，允许我们直接访问它们的底层元素。要创建模板引用，我们在 HTML 元素上使用 ref 属性，并将其分配给局部变量。

<div ref="myElement">
  ...
</div>

然后，我们可以在组件实例中使用 this.$refs 对象来访问模板引用元素。

在子组件中使用模板引用

在子组件中使用模板引用时，我们需要使用具名插槽机制。具名插槽允许我们在父组件中定义一个插槽，并使用 v-slot 指令将子组件渲染到该插槽中。然后，我们可以在子组件中使用 $parent.$refs 对象来访问父组件的模板引用。

解决循环中模板引用的问题

在循环中创建模板引用需要解决一个独特的问题。由于子组件通常不会直接挂载在父组件上，因此需要使用具名插槽将子组件渲染到父组件的插槽中。

以下是如何修改代码以使用具名插槽：

<!-- 父组件 -->
<div>
  <div v-for="(item, idx) in items">
    <div>
      <div>
        <a href="JavaScript:void(0);" title="test" @click="foobar">
          <iconComponent icon="ellipsis-vertical" />
        </a>
      </div>
      <p>TEST {{ templateRefArray?.length }} {{ templateRefArray[idx] }}</p>
      <template v-if="templateRefArray[idx]">
        <childComponent v-model:someModelStuff="someModelStuff" :wrapperElement="templateRefArray[idx]" @select="foobar2">
          <!-- 具名插槽 -->
          <template v-slot:wrapper>
            <div ref="templateRefArray">...</div>
          </template>
        </childComponent>
      </template>
    </div>
  </div>
</div>

<!-- 子组件 -->
<script>
export default {
  mounted() {
    console.log(this.$parent.$refs.templateRefArray); // 输出 DOM 元素
  }
};
</script>