vue js动态创建的element组件用法如何起效

在Vue.js中，动态创建Element UI组件通常通过JavaScript模板的`v-for`指令配合`component`属性来实现。这种做法可以让你在运行时根据数据的变化动态渲染不同的组件实例。

下面是一个简单的例子：

<template>
  <div id="dynamic-components">
    <button v-for="(item, index) in componentsList" :key="index">
      {{ item.name }}
      <el-button :is="item.component" @click="handleClick(index)">点击</el-button>
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      componentsList: [
        { name: 'Button', component: 'el-button' },
        { name: 'Input', component: 'el-input' }
      ]
    };
  },
  methods: {
    handleClick(index) {
      // 这里可以根据需要控制对应组件的行为
      this.$refs[`dynamic-${index}`].$el.focus();
    }
  }
};
</script>

<style scoped></style>

在这个例子中，`componentsList`数组存储了你想在页面上显示的不同组件及其名称。当用户点击按钮时，会触发`handleClick`方法，通过`this.$refs`获取到当前动态组件的引用，并执行相应的操作。

注意，为了给每个动态生成的元素添加引用，你需要在`v-for`循环中设置一个唯一的`ref`属性，例如`:ref="`dynamic-${index}"`。这样，每次迭代都会创建一个新的`ref`。