VueJs3 将数据从一个组件发送到另一个组件

Posted 2023-02-22

【中文标题】VueJs3 将数据从一个组件发送到另一个组件

【英文标题】：VueJs3 sending data from one component to another

【发布时间】：2021-05-02 06:50:37

【问题描述】：

我目前正在做一个 VueJs3 项目。我已经编写了一个登录系统，它工作得很好。我现在想在主页上有一个 div，告诉用户他们使用哪个帐户登录。

"您登录为：" + 用户名

因此，我必须将用户名从登录组件发送到主组件。有人可以帮我吗？我尝试了很多方法，但似乎都没有。

顺便说一句。组件都保存在 components 文件夹中

这是我的代码：

home.vue

    <div class="home">
        <h1>You are logged in as: currentusername</h1>
        <Maschinen/>

    </div>
</template>

<script>
    import Maschinen from '@/components/Maschinen.vue'
    import axios from 'axios'

    export default 
        name: 'Home',
        components: 
            Maschinen
        ,
        data() 
            return 
                currentusername: null,
            
        ,
        async created() 
            const response = await axios.get('http://localhost:8080/user/hetwinuser', 
                headers: 
                    Authorization: 'Bearer ' + localStorage.getItem('token')
                
            );
            this.currentusername= (response.data.username);
        
    
</script>



login.vue:

<template>
    <form @submit.prevent="handleSubmit">
        <h1>Login</h1>
        <!--username + pw input for login-->
        <div class="form-group">
            <label id="username">Username:</label>
            <input id="usernameinput" type="text" class="form-control" v-model="username" placeholder="Username">
        </div>
        <div>
            <label id="password">Password:</label>
            <input id="passwordinput" type="password" class="form-control" v-model="password" placeholder="Password">
        </div>
        <!--enter buttons-->
        <button class="enter">Enter</button>
        <router-link to="/register" id="goToRegister" tag="button">Register</router-link>
    </form>
</template>

<script>
    import axios from 'axios';

    export default 
        name: "Login",
        data: () => 
            return 
                username: '',
                password: ''
            
        ,
        methods: 
            async handleSubmit() //executed when enter button is pressed
                const data = 
                    username: this.username,
                    password: this.password
                ;
                axios.post('http://localhost:8080/authenticate', data) //post the username + pw and will receive the token in exchange
                    .then(
                        res => 
                            localStorage.setItem('token', res.data.jwt);
                            localStorage.setItem('currentusername', this.username);
                            //console.log(localStorage.getItem('token'));
                        
                    ).catch(
                    err => 
                        console.log(err)
                    
                );

            
        ,

    
</script>```

【问题讨论】：

请检查这个答案***.com/a/64019074/8172857

离题，但你可以使用“await”而不是“.then”。

我很难理解这篇文章。你能澄清一下我应该怎么做吗？非常感谢

【参考方案1】：

用户名和密码

在 store -> state.js 下定义它。然后在你想要的地方

将其用作“this.$store.state.username”