Vue組件：$發射不適用于父子組件。我做錯了什么？

我有一個登錄組件，我在 App.vue 主 vue 組件中呼叫它。在登錄 vue 中，當我單擊必須在 vue js 路由器的幫助下激活另一個 vue 組件的任何按鈕時，登錄頁面必須替換為該新 vue 組件。所以我搜索了解決方案，但沒有找到任何有效的解決方案。有趣的是......解決方案存在，但不知何故它們對我不起作用。我想我錯過了一些東西，但究竟是什么？這是我試圖弄清楚什么是不對的第二天。一件事有效，但作為野蠻人的方法 - v-on:click.native 在登錄 vue 中的任何點擊后隱藏登錄 vue，但這不是我想要的。

重要的！我在 Laravel 專案中使用了 vue js。Laravel 版本 8 和 vue js 版本 2

這是我的代碼

登錄.vue

<template>
<div id="login">
    <header-nav></header-nav>
    ...
                    <form>
                       ...
                            <label>
                                <input type="email" v-model="email" name="email" class="form-control" placeholder="email">
                            </label>
                        ...
                            <label>
                                <input type="password" v-model = "password" name="password" class="form-control" placeholder="password">
                            </label>
                        ...
                            <label>
                                <input type="checkbox">
                            </label>Remember Me
                        ...
                            <input type="submit" v-on:click.prevent="login" value="Login" class="btn float-right login_btn">
                       ...
                    </form>
                <div class="card-footer">
                    <div class="d-flex justify-content-center links">
                        Don't have an account?
                        <router-link to="register" v-on:click.prevent='hideLogin'>Sign Up</router-link>
                    </div>
                    <div class="d-flex justify-content-center">
                        <a href="#">Forgot your password?</a>
                    </div>
                </div>
</div>
</template>

<script>

import HeaderNav from "../layout/HeaderNav";

export default {
    name: "Login",
    components: {HeaderNav},
    data: () => {
        return {
            email: '',
            password: ''
        }
    },

    methods:{
        login(){
            this.$store.dispatch('users/login', {email: this.email, password: this.password})
        },

        hideLogin(){
            this.$emit('hideLogin');
            console.log('Hide login');
        }
    },

    template: HeaderNav
}

</script>  

應用程式

<template>
    <div>
        <login v-if="!isHidden" v-on:hideLogin="isHidden = true"></login>
        <router-view></router-view>
    </div>
</template>

<script>
    import Login from "./auth/Login";

    export default {
        name: "App",
        components: {
            Login
        },
        data () {
            return {
                isHidden: false
            }
        },
    }
</script> 

uj5u.com熱心網友回復：

正如在這篇文章中提到的，使用click.native是您需要做的事情才能onclick使用router-link例如偵聽事件

<router-link to="register" v-on:click.native='hideLogin'>Sign Up</router-link>

話雖如此，另一個常見的選擇是監聽路由器本身的變化，并在路由發生變化時關閉模型：

一種方法是更新檔案中的hideLogin邏輯Login.vue：

從 中洗掉點擊偵聽器router-link并為$route

export default {
    name: "Login",
    components: {HeaderNav},
    data: () => {
        return {
            email: '',
            password: ''
        }
    },

    methods: {
        login() {
            this.$store.dispatch('users/login', {email: this.email, password: this.password})
        },

        hideLogin() {
            this.$emit('hideLogin');
            console.log('Hide login');
        }
    },

    template: HeaderNav,
    
    watch: {
        $route() {
            this.hideLogin();
        }
    }
}

這樣，當您導航到該register路線（或任何其他路線）時，該 hideLogin方法將被呼叫。

僅供參考，您可以替換v-on:為@例如@click.native。

標籤：javascript 拉拉维尔 Vue.js Vuejs2

上一篇：無法讀取未定義的屬性（讀取“preventDefault”）

下一篇：如何將一個變數的值分配給另一個變數的名稱？[JavaScript,Vue.js]