Vue3中如何配置Simple-keyboard自定义布局并调用clearInput()方法？

问题描述 #

我是Vue新手，开发简单游戏时在Vue3组件中使用自己封装的SimpleKeyboard组件，基础功能正常，但尝试调用clearInput()方法清除键盘输入、设置自定义布局时遇到问题：

• 父组件中判断输入正确后，设置this.input=''并调用this.simpleKeyboard.clearInput()，报错：Uncaught TypeError: Cannot read properties of undefined (reading 'clearInput')
• 尝试在mounted中通过this.$refs.simplekeyboard获取组件实例，但Vue开发者工具显示该组件为keyboard:Unknown Component
• 自定义布局已在父组件定义，但无法传递给SimpleKeyboard组件生效

相关代码片段：
父组件使用SimpleKeyboard的模板：

<input
  :value="input"
  class="input"
  @input="onInputChange"
  placeholder="Tap on the virtual keyboard to start"
>
<SimpleKeyboard 
  ref="simplekeyboard"
  @onChange="onChange" 
  @onKeyPress="onKeyPress" 
  :input="input"
  :layout="layout"
></SimpleKeyboard>

父组件的匹配判断方法：

_match(){
  if(this.showCard.description.toUpperCase() === this.input.toUpperCase()){    
       this.matches++;
       this.input='';
       this.simpleKeyboard.clearInput();
  }
}

封装的SimpleKeyboard组件代码：

<template>
  <div class="simple-keyboard"></div>
</template>

<script>
import Keyboard from "simple-keyboard";
import "simple-keyboard/build/css/index.css";

export default {
  name: "SimpleKeyboard", 
 
  data: () => ({
    keyboard: null
  }),
  mounted() {
    this.keyboard = new Keyboard({
      onChange: this.onChange,
      onKeyPress: this.onKeyPress
    });
  },
  methods: {
    onChange(input) {
      this.$emit("onChange", input);
    },
    onKeyPress(button) {
      this.$emit("onKeyPress", button);

      if (button === "{shift}" || button === "{lock}") this.handleShift();
    },
    handleShift() {
      let currentLayout = this.keyboard.options.layoutName;
      let shiftToggle = currentLayout === "default" ? "shift" : "default";

      this.keyboard.setOptions({
        layoutName: shiftToggle
      });
    }
  }
};
</script>

问题根源 #

你封装的SimpleKeyboard组件存在三个核心问题：

1. 未接收父组件传递的input和layout props，导致自定义布局无法生效、输入同步异常
2. 未暴露SimpleKeyboard实例的核心方法（如clearInput、setOptions）给父组件调用
3. 未监听父组件传入的input变化，无法同步更新键盘内部的输入值

修复步骤 #

1. 完善SimpleKeyboard封装组件 #

修改子组件代码，补充props接收、方法暴露、输入与布局监听：

<template>
  <div class="simple-keyboard"></div>
</template>

<script>
import Keyboard from "simple-keyboard";
import "simple-keyboard/build/css/index.css";

export default {
  name: "SimpleKeyboard",
  props: {
    // 接收父组件传入的输入值
    input: {
      type: String,
      default: ""
    },
    // 接收父组件传入的自定义布局
    layout: {
      type: Object,
      default: () => ({})
    }
  },
  data: () => ({
    keyboard: null
  }),
  watch: {
    // 监听父组件input变化，同步更新键盘输入
    input(newVal) {
      this.keyboard?.setInput(newVal);
    },
    // 监听父组件layout变化，更新键盘布局
    layout(newVal) {
      this.keyboard?.setOptions({ layout: newVal });
    }
  },
  mounted() {
    this.keyboard = new Keyboard({
      onChange: this.onChange,
      onKeyPress: this.onKeyPress,
      // 初始化时传入父组件的布局与输入值
      layout: this.layout,
      input: this.input
    });
  },
  methods: {
    onChange(input) {
      this.$emit("onChange", input);
    },
    onKeyPress(button) {
      this.$emit("onKeyPress", button);

      if (button === "{shift}" || button === "{lock}") this.handleShift();
    },
    handleShift() {
      let currentLayout = this.keyboard.options.layoutName;
      let shiftToggle = currentLayout === "default" ? "shift" : "default";

      this.keyboard.setOptions({
        layoutName: shiftToggle
      });
    },
    // 暴露clearInput方法给父组件调用
    clearInput() {
      this.keyboard?.clearInput();
    },
    // 按需暴露其他方法，比如设置键盘选项
    setOptions(options) {
      this.keyboard?.setOptions(options);
    }
  }
};
</script>

2. 父组件中正确调用组件方法 #

修改父组件代码，移除冗余的simpleKeyboard变量声明，直接通过$refs调用子组件方法：

<template>
  <div>
    <input
      :value="input"
      class="input"
      @input="onInputChange"
      placeholder="Tap on the virtual keyboard to start"
    >
    <SimpleKeyboard 
      ref="simplekeyboard"
      @onChange="onChange" 
      @onKeyPress="onKeyPress" 
      :input="input"
      :layout="layout"
    ></SimpleKeyboard>
  </div>
</template>

<script>
import SimpleKeyboard from "./SimpleKeyboard.vue";

export default {
  components: { SimpleKeyboard },
  data() {
    return {
      input: "",
      matches: 0,
      showCard: { description: "" },
      // 自定义布局示例
      layout: {
        default: [
          "q w e r t y u i o p",
          "a s d f g h j k l",
          "{shift} z x c v b n m {backspace}",
          "{lock} {space} {enter}"
        ]
      }
    };
  },
  methods: {
    onInputChange(e) {
      this.input = e.target.value;
    },
    onChange(input) {
      this.input = input;
    },
    onKeyPress(button) {
      // 自定义按键逻辑
    },
    _match() {
      if(this.showCard.description.toUpperCase() === this.input.toUpperCase()){    
        this.matches++;
        this.input = '';
        // 直接通过$refs调用子组件暴露的clearInput方法
        this.$refs.simplekeyboard.clearInput();
      }
    }
  }
};
</script>

关键说明 #

• 子组件通过props接收父组件的配置项，通过watch监听变化实时同步到键盘实例
• 子组件将需要外部调用的方法定义在methods中，父组件通过$refs获取子组件实例后即可直接调用
• 无需在父组件data中声明simpleKeyboard变量，组件挂载完成后$refs即可访问到实例

内容的提问来源于stack exchange，提问作者M.Koops