收银页面有一个button,点击会跳出一个弹窗组件，弹窗里面有一个input,输入的值如何传入到收银页面，vue3代码实现

在 Vue 3 中，你可以使用 Vue 的 `$emit` 和 `$on` 来实现在按钮点击事件中打开弹窗，并将输入值传递回父组件。下面是一个简单的例子：

首先，在弹窗组件 (`Modal.vue`) 中，给输入框添加 `@input` 事件监听并触发 `$emit` 发送输入值：

<template>
  <div class="modal">
    <input type="text" @input="handleInput" />
    <button @click="close">关闭</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleInput(value) {
      this.$emit('input-value-changed', value);
    },
    close() {
      this.$emit('close');
    }
  }
}
</script>

然后，在收银页面 (`Checkout.vue`) 中，导入弹窗组件，并监听 `'input-value-changed'` 和 `'close'` 事件：

<template>
  <button @click="openModal">打开弹窗</button>
  <Modal :visible.sync="modalVisible" @input-value-changed="handleInputValue"></Modal>
</template>

<script>
import Modal from './Modal.vue';

export default {
  components: { Modal },
  data() {
    return {
      modalVisible: false,
      inputValue: ''
    };
  },
  methods: {
    openModal() {
      this.modalVisible = true;
    },
    handleInputValue(value) {
      this.inputValue = value;
    }
  }
};
</script>

当在弹窗的输入框中输入值并点击关闭按钮，`handleInputValue` 方法会被调用，`inputValue` 数据会在父组件（收银页面）中更新。同时，`close` 事件会清除 `modalVisible` 属性，关闭弹窗。