Vue3 Ts Setup語法 動態獲取Dom 或 調用子組件方法

在Vue3 setup中獲取 Dom 和 調用子組件方法

Tips: 尤大大: 請仔細閱讀我們的文檔

參考文檔

v-for 中的 Ref 數組

獲取Dom

<template>
  <div class="todo" ref="todoDom" @click="handleClick"></div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';

const todoDom = ref<any>(null);

onMounted(() => {
  console.log(todoDom.value);
});

const handleClick = () => {
  todoDom.value.style.backgroundColor = '#00f';
}
</script>

<style>
  .todo {
    width: 100px;
    height: 100px;
    background-color: #f00;
  }
</style>

示例: 預覽地址

調用子組件方法

• App.vue

<template>
  <todo></todo>
</template>

<script setup>
import Todo from './Todo.vue';
</script>

• 父組件(Todo.vue)

<template>
  <div class="todo-list">
    <todo-item
      :ref="setItemRef"
      v-for="(item, index) of todoList"
      :key="index"
      @click="handleClick(item, index)"
    ></todo-item>
  </div>
</template>

<script lang="ts" setup>
import TodoItem from './TodoItem.vue';

import { ref, nextTick, onBeforeUpdate } from 'vue';

const todoList = [
  { id: 1, name: 'todoItem1' },
  { id: 2, name: 'todoItem2' },
  { id: 3, name: 'todoItem3' },
]

const itemRefs = ref<any>([]); // 儲存獲取的Dom元素或子組件實例

const setItemRef = (el) => {
  if (el) {
    itemRefs.value.push(el);
  }
};

// 每次更新前把實例清空
onBeforeUpdate(() => {
  itemRefs.value = [];
});

const handleClick = (item, index) => {
  nextTick(() => {
    itemRefs.value[index].changeCircle && itemRefs.value[index].changeCircle();
  });
};
</script>

<style>
.todo-list {
  display: flex;
}
</style>

• 子組件(TodoItem.vue)

<template>
  <div class="todo-item">
    <div class="circle" v-show="circleStatus"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineExpose } from 'vue';

const circleStatus = ref<Boolean>(true);
const changeCircle = () => {
  circleStatus.value = !circleStatus.value;
};

// 將子組件的方法和屬性暴露出去
defineExpose({
  circleStatus,
  changeCircle,
});
</script>

<style>
.todo-item {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #f5f5f5;
}

.circle {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #f00;
}
</style>

示例: 預覽地址