vue获取dom元素添加子元素

在 Vue 中获取 DOM 元素的常用方式是使用 `ref` 属性。在模板中，可以给元素添加一个 `ref` 属性，然后在 Vue 实例中通过 `$refs` 属性访问该元素。

例如，可以在模板中添加一个 `div` 元素并给其添加一个 `ref` 属性：

<template>
  <div ref="container"></div>
</template>

然后在 Vue 实例中，可以通过 `$refs` 访问该元素并添加子元素：

export default {
  mounted() {
    const container = this.$refs.container;
    const child = document.createElement('div');
    child.textContent = 'Hello, World!';
    container.appendChild(child);
  }
}

这样就可以在 `container` 元素中添加一个文本内容为 "Hello, World!" 的 `div` 子元素。

相关问题

vue通过ref获取dom子元素

在Vue中，可以通过给元素添加ref属性来获取DOM子元素。通过在元素上添加ref属性并赋予一个唯一的标识符，可以在Vue实例中使用this.$refs来访问该DOM子元素的实例。例如，在模板中添加ref属性：<p ref="mp">这是p标签</p>，然后在Vue实例的方法中使用this.$refs.mp来获取该p标签的实例。这样可以方便地操作和获取DOM子元素的属性和方法。
#### 引用[.reference_title]
- *1* *2* *3* [18、ref和$refs的使用](https://blog.csdn.net/weixin_46841213/article/details/115710803)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

vue setup 获取dom元素

在 Vue 3 中，可以使用不同的方法来获取子组件的 DOM 元素。其中一种方法是通过在父组件的 `<script setup>` 区块中使用 Composition API 的语法来编写组件逻辑，并使用 `onMounted` 钩子函数来访问子组件的 DOM 元素。具体步骤如下：

1. 首先，在父组件的 `<script setup>` 区块中使用 `ref` 创建一个引用，并将其绑定到子组件的 `ref` 属性上。例如，可以使用 `childRef` 来引用子组件。

2. 然后，在 `onMounted` 钩子函数中使用 `childRef.value.$el` 来访问子组件的 DOM 元素。这样就可以轻松地获取到子组件的 DOM 元素了。

以下是一个示例代码，演示了如何在 Vue 3 中使用 `<script setup>` 区块和 `onMounted` 钩子函数来获取子组件的 DOM 元素：

<template>
  <div>
    <ChildComponent ref="childRef"></ChildComponent>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const childRef = ref(null);

onMounted(() => {
  console.log(childRef.value.$el); // 访问子组件的 DOM 元素
});
</script>

通过以上步骤，你就能够在 Vue 3 中使用 `<script setup>` 区块和 `onMounted` 钩子函数来获取子组件的 DOM 元素了。这对于执行诸如测量元素大小、计算位置、添加样式等操作非常有用。