vue 3组件动态创建div并且添加到组件中

你可以在 Vue 3 组件中使用 `ref` 来引用一个元素，然后在组件的方法中通过 `createElement` 动态创建一个 `div`，并将其添加到引用的元素中。具体实现可以参考以下代码示例：

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

<script>
export default {
  methods: {
    createDiv() {
      const container = this.$refs.container;
      const div = document.createElement('div');
      div.innerHTML = '动态创建的div';
      container.appendChild(div);
    }
  }
}
</script>

在上述代码中，我们在组件的 `template` 中定义了一个 `div`，并使用 `ref` 指令给它命名为 `container`。然后在组件的 `methods` 中定义了一个 `createDiv` 方法，该方法中通过 `createElement` 创建了一个 `div`，并将其添加到 `container` 中。最后，你可以在组件的某个事件或生命周期钩子中调用 `createDiv` 方法来动态创建并添加 `div` 元素。

相关问题

vue3动态添加div

在Vue3中，你可以在组件的模板中使用v-for指令遍历数据并渲染div元素，也可以使用Vue提供的动态组件(component)来动态渲染不同的组件。另外，你还可以利用Vue3的响应式数据特性，在组件的方法中动态添加div元素。下面是一个简单的示例代码：

<template>
  <div>
    <button @click="addDiv">添加div</button>
    <div v-for="(item, index) in divList" :key="index">{{ item }}</div>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const divList = reactive([]) // 响应式数据

    const addDiv = () => {
      divList.push('new div') // 动态向响应式数据中添加元素
    }

    return {
      divList,
      addDiv
    }
  }
}
</script>

在上面的代码中，我们使用Vue3提供的响应式函数`reactive`来创建一个空数组`divList`，然后在`addDiv`方法中，动态向`divList`数组中添加元素。最后，在模板中使用`v-for`指令遍历`divList`数组并渲染div元素。每次点击“添加div”按钮，就会在页面中动态添加一个新的div元素。

vue动态创建组件

在Vue中动态创建组件有两种方式：

1. 使用`Vue.component`方法全局注册组件，然后在需要的时候通过组件名动态创建。

// 定义组件
Vue.component('my-component', {
  template: '<div>这是一个动态创建的组件</div>'
})

// 动态创建并挂载到某个元素上
new Vue({
  el: '#app',
  methods: {
    createComponent() {
      // 创建组件实例
      const MyComponent = Vue.extend('my-component')
      // 挂载到元素上
      new MyComponent().$mount('#component-container')
    }
  }
})

2. 直接使用`Vue.extend`方法创建组件，然后在需要的时候通过组件实例动态创建。

// 定义组件
const MyComponent = Vue.extend({
  template: '<div>这是一个动态创建的组件</div>'
})

// 动态创建并挂载到某个元素上
new Vue({
  el: '#app',
  methods: {
    createComponent() {
      // 创建组件实例
      const componentInstance = new MyComponent()
      // 挂载到元素上
      componentInstance.$mount('#component-container')
    }
  }
})

需要注意的是，在动态创建组件时，我们需要手动将组件实例挂载到某个元素上，否则组件将不会显示出来。