使用ref给html添加一个<el-input>

使用`ref`给HTML添加一个`<el-input>`，可以通过动态创建一个新的`<el-input>`元素，并将它添加到DOM中。需要注意的是，`<el-input>`是Element UI框架中的一个组件，需要先在组件中引入Element UI相关的代码。

下面是一个例子，假设我们有一个`MyComponent`组件，需要在组件中添加一个`<el-input>`元素，并给它添加一个`ref`属性，然后在`mounted`钩子函数中使用`$refs`属性获取这个`<el-input>`元素，并设置它的属性和事件：

<template>
  <div>
    <h1>My Component</h1>
    <div ref="myDiv"></div>
  </div>
</template>

<script>
import { Input } from 'element-ui'

export default {
  mounted() {
    const myDiv = this.$refs.myDiv
    const input = new Input({
      propsData: {
        placeholder: '请输入文本'
      },
      on: {
        input: value => {
          console.log(value)
        }
      }
    })
    input.$mount()
    myDiv.appendChild(input.$el)
  }
}
</script>

在上面的例子中，我们使用了`ref="myDiv"`给一个`<div>`元素添加了一个`ref`属性，然后在`mounted`钩子函数中使用了`this.$refs.myDiv`获取了这个元素，并通过动态创建一个新的`<el-input>`元素，并设置它的属性和事件。最后，使用`$mount()`方法将新创建的`<el-input>`元素挂载到DOM中。

需要注意的是，这种方法需要手动处理`<el-input>`元素的属性和事件，比较繁琐。如果只是简单地需要在组件中添加一个`<el-input>`元素，可以直接在模板中使用`<el-input>`标签。