如何使用vue3获取安装代码块中的输入值

Question

我想使用vue3编写一个登录页面。我在vue3组件模板中定义了一个输入，如下所示：

<template>
  <div id="app">
    <div id="wrap">
      <ul class="nav nav-tabs">
        <li>
          <input :value="username" placeholder="username" @input="$emit('update:username',$event.target.value)"/>
          <input v-model="password" placeholder="password" />
          <button @click="login">Login</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: ['username'],
  setup() {
    const login = (() => {
      alert(this.username);
    })

    return {
      login,
      username:""
    };
  },
  components: {
  },
  computed: {
    value: {
      get() {
        return this.username;
      },
      set(v: any) {
        this.$emit('update:username', v);
      },
    },
  },
});
</script>

现在我想从输入中获取username，我应该做什么？我尝试使用this.username，但它找不到变量用户名。

Answer 1

尝试像这样调整模板输入：

<input 
 :value="props" 
 placeholder="username" 
 v-on:input="updateValue($event.target.value)"/>

并在安装代码块中获取用户名，如下所示：

setup() {
    function updateValue(value: any) {
      console.log("current username:" + value);
    }
}