Reactive References in Vue 3

When working with reactive data in Vue 3's Composition API, the ref() function creates a reactive object containing a .value property. This wrapper object can hold any data type and is initially set to undefined. These reactive references can be directly used in templates through interpolation.

A common pattern involves template refs, where DOM elements are accessed via matching variable names. For instance, a template element with ref="container" should correspond to a variable named container initialized with ref() in the script setup.

<div ref="chartContainer" style="height: 400px; width: 500px">Chart Area</div>

const chartContainer = ref();
console.log("DOM Reference:", chartContainer);

const unusedRef = ref();
console.log("Empty Reference:", unusedRef);

In this example, chartContainer will contain a reference to the corresponding DOM element, while unusedRef remains an empty reactive object since no matching template ref exists.

Customizing Element UI Component Styles

Styling modifications for third-party components require deep selectors due to CSS scoping limitations. While Vue 2 utilized /deep/ and >>> combinators, Vue 3 recommends the ::v-deep pseudo-class selector, particularly when working with SCSS preprocessors.

To customize specific component parts like the header of an Element Plus collapse panel, inspect the generated HTML structure using browser developer tools. Identify the target CSS classes and apply overrides using the deep selector syntax.

<template>
  <el-col :span="12">
    <el-collapse v-model="activePanel" accordion>
      <el-collapse-item
        v-for="notice in announcements"
        :key="notice.id"
        :title="notice.title"
        :name="notice.id"
      >
        <div style="padding:0 20px;">
          <strong>Content:</strong>
          {{ notice.text }}
        </div>
        <div style="padding:0 20px;">
          <strong>Published:</strong>
          {{ notice.date }}
        </div>
      </el-collapse-item>
    </el-collapse>
  </el-col>
</template>

.el-collapse-item {
  --el-collapse-header-font-size: 16px;
}

::v-deep .el-collapse-item__header {
  font-weight: 550;
}

This approach allows cusotmization of scoped component styles by penetrating the component's style boundaries while maintaining CSS variable support for theme cosnistency.