Vue3.0中按键绑定按钮

Question

我试图在单击鼠标或按下某个键时触发按钮，但我对组件之间的通信感到困惑。 KeyButton组件的父组件应该如何调用pressDown()，或者有更好的实现方法吗？

这是我的尝试

按钮容器

<template>
  <key-button :message="'Msg'" :callback="pressKey" ></key-button>
</template>
<script setup>
import KeyButton from "./KeyButton.vue";
import {ref,onMounted} from "vue";
onMounted(()=>{
  addEventListener('keypress',(e)=>{
    //trigger button
  });
})
const pressKey = () => {
  //exec when button clicked
}
</script>

KeyButton 组件

<template>
  <button class="button" :class="{'animate': active}" v-on="{mousedown:pressDown,animationend:triggerAnim}">{{props.message}}</button>
</template>

<script setup>
import {ref,defineProps} from 'vue';
const props = defineProps({
  message: String,
  callback: Function
})
const active = ref(false);
//Function to trigger button
const pressDown = ()=>{
  props.callback();
  triggerAnim();
}
const triggerAnim = ()=>{
  active.value = !active.value;
}

</script>

<style scoped>
button{
  display: flex;
  height: 5rem;
  width: 5rem;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: white;
  border-color: deepskyblue;
  border-width: 0.15rem;
  border-radius: 50%;
  background-color: lightskyblue;
  margin-bottom: 1rem;
  margin-left: 2rem;
  outline: none !important;
}

.animate{
  animation: zoom 0.2s;
}

@keyframes zoom {
  0%{
    transform: scale(1);
  }
  10%{
    transform: scale(0.9);
  }
  100%{
    transform: scale(1);
  }
}
</style>

Answer 1

你不应该在 vue 中将方法作为 props 传递，因为这会在组件之间产生相互依赖性并降低它们的可重用性。

您应该在按键时从 KeyButton 组件发出一个事件，并在父组件中收听它，而不是传递该方法，如下所示：

// KeyButton Component
<button @click="$emit('button-pressed')" />

// Parent
<KeyButton @button-pressed="pressKey" />

Answer 2

您不应在组件之间将回调作为 props 传递。 Vue 有一个在组件之间共享函数的模式：enter link description here、provide/inject 模式。

不过，我建议您按照 Aside 给您的方法，通过在子组件上向父组件发出事件来使用 vue 提供的事件处理。

Vue3.0中按键绑定按钮

Binding button with keypress in Vue3.0

html

javascript

css

vue.js

vue-component