Vue.js 模板引用

<template>
  <div>
    <h3>DOM元素操作示例</h3>

    <!-- 输入框焦点管理 -->
    <div class="mb-3">
      <label>用户名:</label>
      <input ref="username" type="text" class="form-control">
      <button @click="focusUsername" class="btn btn-sm btn-primary mt-2">
        聚焦用户名输入框
      </button>
    </div>

    <!-- 获取元素尺寸 -->
    <div ref="sizeElement" class="p-3 border">
      这个元素的尺寸是: {{ elementSize }}
    </div>
    <button @click="measureElement" class="btn btn-sm btn-info mt-2">
      测量元素尺寸
    </button>

    <!-- 滚动到元素 -->
    <div ref="targetElement" class="p-3 bg-warning mt-3">
      滚动到这里
    </div>
    <button @click="scrollToElement" class="btn btn-sm btn-warning mt-2">
      滚动到目标元素
    </button>

    <!-- 修改元素样式 -->
    <div ref="styleElement" class="p-3 mt-3">
      点击按钮修改我的样式
    </div>
    <button @click="changeStyle" class="btn btn-sm btn-success mt-2">
      修改样式
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      elementSize: '未测量'
    };
  },
  methods: {
    focusUsername() {
      if (this.$refs.username) {
        this.$refs.username.focus();
        this.$refs.username.select(); // 选中文本
      }
    },
    measureElement() {
      if (this.$refs.sizeElement) {
        const rect = this.$refs.sizeElement.getBoundingClientRect();
        this.elementSize = `${Math.round(rect.width)}px × ${Math.round(rect.height)}px`;
      }
    },
    scrollToElement() {
      if (this.$refs.targetElement) {
        this.$refs.targetElement.scrollIntoView({
          behavior: 'smooth',
          block: 'center'
        });
      }
    },
    changeStyle() {
      if (this.$refs.styleElement) {
        const element = this.$refs.styleElement;
        element.style.backgroundColor = '#e74c3c';
        element.style.color = 'white';
        element.style.fontWeight = 'bold';
        element.style.borderRadius = '10px';
        element.textContent = '样式已修改！';
      }
    }
  }
};
</script>
                            

<template>
  <div>
    <h3>v-for中的模板引用</h3>

    <!-- 添加项目 -->
    <div class="mb-3">
      <input v-model="newItem" type="text" placeholder="输入新项目">
      <button @click="addItem" class="btn btn-sm btn-primary">添加项目</button>
    </div>

    <!-- 项目列表 -->
    <ul>
      <li v-for="(item, index) in items"
          :key="index"
          ref="itemElements">
        {{ item }}
        <button @click="highlightItem(index)" class="btn btn-sm btn-info">
          高亮此项
        </button>
      </li>
    </ul>

    <!-- 操作按钮 -->
    <div class="mt-3">
      <button @click="highlightAll" class="btn btn-warning">
        高亮所有项目
      </button>
      <button @click="clearHighlights" class="btn btn-secondary">
        清除高亮
      </button>
      <button @click="getFirstItemText" class="btn btn-info">
        获取第一个项目文本
      </button>
    </div>

    <!-- 使用v-for引用组件 -->
    <h4 class="mt-4">组件列表</h4>
    <div v-for="(data, index) in componentData"
         :key="'comp-' + index">
      <ChildComponent
        :value="data"
        ref="childComponents">
      </ChildComponent>
    </div>
    <button @click="callAllComponents" class="btn btn-success mt-2">
      调用所有组件方法
    </button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  data() {
    return {
      items: ['项目A', '项目B', '项目C', '项目D'],
      newItem: '',
      componentData: [10, 20, 30]
    };
  },
  methods: {
    addItem() {
      if (this.newItem.trim()) {
        this.items.push(this.newItem);
        this.newItem = '';

        // 注意：当添加新项目后，$refs.itemElements会自动更新
        // 但需要在下次DOM更新后才能访问新添加的引用
        this.$nextTick(() => {
          console.log('当前项目元素数量:', this.$refs.itemElements.length);
        });
      }
    },
    highlightItem(index) {
      // $refs.itemElements是一个数组
      if (this.$refs.itemElements && this.$refs.itemElements[index]) {
        const element = this.$refs.itemElements[index];
        element.style.backgroundColor = '#ffeb3b';
        element.style.fontWeight = 'bold';
      }
    },
    highlightAll() {
      // 遍历所有引用
      if (this.$refs.itemElements) {
        this.$refs.itemElements.forEach(element => {
          element.style.backgroundColor = '#ffeb3b';
          element.style.fontWeight = 'bold';
        });
      }
    },
    clearHighlights() {
      if (this.$refs.itemElements) {
        this.$refs.itemElements.forEach(element => {
          element.style.backgroundColor = '';
          element.style.fontWeight = '';
        });
      }
    },
    getFirstItemText() {
      if (this.$refs.itemElements && this.$refs.itemElements[0]) {
        const text = this.$refs.itemElements[0].textContent;
        alert(`第一个项目的文本: ${text}`);
      }
    },
    callAllComponents() {
      // $refs.childComponents是一个组件实例数组
      if (this.$refs.childComponents) {
        this.$refs.childComponents.forEach((component, index) => {
          console.log(`调用组件${index}的方法`);
          // 假设组件有一个doSomething方法
          // component.doSomething();
        });
        alert(`调用了 ${this.$refs.childComponents.length} 个组件的方法`);
      }
    }
  },
  mounted() {
    // 在mounted中访问引用数组
    console.log('项目元素引用数组:', this.$refs.itemElements);
    console.log('组件引用数组:', this.$refs.childComponents);
  }
};
</script>
                            

<template>
  <div>
    <h3>函数形式的模板引用</h3>

    <!-- 函数形式ref -->
    <input :ref="(el) => setInputRef(el)"
           type="text"
           placeholder="函数形式ref示例">

    <button @click="focusDynamicRef" class="btn btn-primary">
      聚焦输入框
    </button>

    <!-- 动态绑定ref函数 -->
    <div class="mt-3">
      <label>选择要引用的元素:</label>
      <select v-model="selectedElement">
        <option value="first">第一个输入框</option>
        <option value="second">第二个输入框</option>
      </select>
    </div>

    <!-- 多个元素，使用动态ref -->
    <input v-if="selectedElement === 'first'"
           :ref="dynamicRef"
           type="text"
           placeholder="第一个输入框">

    <input v-else
           :ref="dynamicRef"
           type="text"
           placeholder="第二个输入框">

    <!-- 使用ref清理函数 -->
    <div class="mt-4">
      <button @click="toggleSpecialElement" class="btn btn-warning">
        {{ showSpecialElement ? '隐藏' : '显示' }}特殊元素
      </button>

      <div v-if="showSpecialElement"
           :ref="specialElementRef"
           class="p-3 bg-info text-white mt-2">
        这是一个特殊元素
      </div>
    </div>

    <!-- 显示引用信息 -->
    <div class="mt-3">
      <p>当前引用的元素: {{ currentRefType }}</p>
      <p>特殊元素引用: {{ specialElementInfo }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputRef: null,
      dynamicElementRef: null,
      selectedElement: 'first',
      showSpecialElement: false,
      specialElementRefValue: null,
      currentRefType: '无',
      specialElementInfo: '无'
    };
  },
  computed: {
    // 计算属性返回ref函数
    dynamicRef() {
      return (el) => {
        this.dynamicElementRef = el;
        this.currentRefType = this.selectedElement === 'first'
          ? '第一个输入框'
          : '第二个输入框';
        console.log('动态ref函数被调用，元素:', el);
      };
    },
    // 带有清理逻辑的ref函数
    specialElementRef() {
      return (el) => {
        if (el) {
          // 元素被挂载
          this.specialElementRefValue = el;
          this.specialElementInfo = `已挂载，标签名: ${el.tagName}`;
          console.log('特殊元素已挂载:', el);

          // 可以在这里执行一些初始化操作
          el.style.border = '2px solid red';
        } else {
          // 元素被卸载 (el为null)
          this.specialElementInfo = '已卸载';
          console.log('特殊元素已卸载');

          // 可以在这里执行一些清理操作
          if (this.specialElementRefValue) {
            // 清理操作
            this.specialElementRefValue = null;
          }
        }
      };
    }
  },
  methods: {
    setInputRef(el) {
      this.inputRef = el;
      console.log('输入框引用已设置:', el);

      // 可以立即执行一些操作
      if (el) {
        el.style.borderColor = '#42b983';
      }
    },
    focusDynamicRef() {
      if (this.inputRef) {
        this.inputRef.focus();
        this.inputRef.select();
      }
    },
    toggleSpecialElement() {
      this.showSpecialElement = !this.showSpecialElement;
    }
  }
};
</script>