在vue3中怎么把登陆页面的用户名通过props传到登陆后的页面上

在登陆页面中，首先需要使用`v-model`指令绑定用户名输入框的值，然后在提交登陆表单时，通过`this.$emit('login', this.username)`将用户名作为参数传递给父组件：

<template>
  <div>
    <label for="username">用户名:</label>
    <input type="text" id="username" v-model="username">
    <button @click="login">登陆</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: ''
    }
  },
  methods: {
    login() {
      // 登陆逻辑
      this.$emit('login', this.username)
    }
  }
}
</script>

在父组件中，将登陆后的页面作为子组件，并在父组件中使用`v-bind`将用户名传递给子组件：

<template>
  <div>
    <login @login="onLogin"></login>
    <dashboard v-if="loggedIn" :username="username"></dashboard>
  </div>
</template>

<script>
import Login from './Login.vue'
import Dashboard from './Dashboard.vue'

export default {
  components: {
    Login,
    Dashboard
  },
  data() {
    return {
      loggedIn: false,
      username: ''
    }
  },
  methods: {
    onLogin(username) {
      this.loggedIn = true
      this.username = username
    }
  }
}
</script>

在登陆后的页面中，接收通过`props`传递过来的用户名，并在页面中展示：

<template>
  <div>
    <h1>欢迎 {{ username }} 登陆</h1>
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  props: {
    username: {
      type: String,
      required: true
    }
  }
}
</script>