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>

示例: 预览地址