需求

点击按钮后自动生成符合用户配置的四则运算题。
每次产生题后，自动聚焦在第一个输入框
用户在输入完答案，按下回车键，如果正确，则隐藏，并自动聚焦到下一个未隐藏的输入框

image.png

实现

Input 组件

<FormItem  :key="item" v-show="answer[index].isShow" v-for="(item ,index ) in expressionsList">
        <span class="expression" >{{item}}</span>
        <Input :key="item"    :ref="'input'+index"   type="text" 
               @on-keydown.enter="submit" v-model="answer[index].user_result"></Input>
</FormItem>

:ref="'input'+index" 是关键用来后续引用组件

 toggle_model(){
    this.answer_model = !this.answer_model;
    this.expressionsList = [];
    if(this.answer_model){

      this.generate_expressions();
      this.$nextTick(()=>{
        // this.$refs['input0'][0].$refs.input.focus();
        this.$refs['input0'][0].focus();
      })
    }
  },

this.generate_expressions(); 填充了expressionsList
this.$nextTick 里面的代码让每次生成题第一个输入框都可以自动获得焦点

this.$refs['input0'][0].focus(); 中的focus 是Input组件提供的方法

点击回车键让下一个聚焦则不需要使用 this.$nextTick ，找到第一个未被隐藏的索引，使用上述方法即可

上述答案是踩了很多坑之后发现的
使用自定义指令、深度监听属性、Input组件的autofocus、如何在列表渲染完成后执行方法、Input组件的foucs怎么用、是不是因为组件的复用导致autofocus在第一次后失效等等。