Vue 报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the pa...

场景：父组件向子组件传递数据，子组件去试图改变父组件数据的时候。

解决：子组件通过事件向父组件传递信息，让父组件来完成数据的更改。

比如：我的父组件是普通页面，子组件是弹窗的登录界面，父组件传递的数据（reloginDialog）控制登录界面的显示（reloginDialog = true），当登陆成功后，子组件触发一个事件，父组件捕获后（reloginDialog = false）将登录界面隐藏。

父组件调用

<re-login :dialogProp="reloginDialog" @login-success="reloginDialog = $event">re-login>

子组件详细【ReLogin.vue】

<template>
    <v-layout row justify-center>
        <v-dialog v-model="dialogProp" persistent max-width="500">
            <v-card class="login-bg">
                <v-card-text>
                    <v-container fluid fill-height>
                        <v-layout align-center justify-center row fill-height text-xs-center>
                            <v-flex xs12>
                                <v-card color="#ffffffe6">
                                    <v-card-title>v-card-title>
                                    <h1 class="headline text-xs-center">****管理系统h1>
                                    <v-form
                                            ref="form"
                                            lazy-validation
                                    >
                                        <v-flex class="xs8 offset-xs2">
                                            <v-text-field
                                                    color="blue"
                                                    v-model="submitData.empCode"
                                                    label="用户名"
                                                    :rules="[rules.required]"
                                                    prepend-inner-icon="fas fa-user"
                                            >v-text-field>
                                        v-flex>
                                        <v-flex class="xs8 offset-xs2">
                                            <v-text-field
                                                    color="blue"
                                                    v-model="submitData.password"
                                                    prepend-inner-icon="fas fa-lock"
                                                    :append-icon="show1 ? 'fas fa-eye' : 'fas fa-eye-slash'"
                                                    :rules="[rules.required, rules.min]"
                                                    :type="show1 ? 'text' : 'password'"
                                                    label="密码"
                                                    counter
                                                    @click:append="show1 = !show1"
                                            >v-text-field>
                                        v-flex>
                                    v-form>
                                    <v-flex class="xs8 offset-xs2">
                                        <v-btn color="blue" block dark @click="login">登录v-btn>
                                    v-flex>
                                    <v-card-title>v-card-title>
                                v-card>
                                
                                <v-snackbar
                                        v-model="snackbar.show"
                                        multi-line
                                        top
                                        right
                                        :timeout="snackbar.timeout"
                                        color="blue-grey darken-4"
                                >
                                    {{ snackbar.text }}
                                    <v-btn
                                            color="pink"
                                            flat
                                            fab
                                            dark
                                            @click="snackbar.show = false"
                                    >
                                        <v-icon>fas fa-timesv-icon>
                                    v-btn>
                                v-snackbar>
                            v-flex>
                        v-layout>
                    v-container>
                v-card-text>
            v-card>
        v-dialog>
    v-layout>
template>

<script>
    export default {
        name: "ReLogin",
        props: ['dialogProp'],
        data: () => ({
            // 全局提示
            snackbar: {
                show: false,
                timeout: 6000,
                text: ''
            },
            show1: false,
            submitData:{
                empCode: '',
                password:''
            },
            rules: {
                required: value => !!value || '请填写此字段.',
                min: v => v.length >= 6 || '最少6个字符'
            }
        }),
        methods: {
            login: function () {
                let me = this;
                let tip = this.snackbar;
                let store = this.$store;
                if (!this.$refs.form.validate()) {
                    tip.show = true;
                    tip.text = '请检查字段是否符合规则';
                    return;
                }
                store.state.axios.post('/admin/login', this.submitData)
                    .then(function (response) {
                        let data = response.data;
                        if (data.code == 0){
                            sessionStorage.setItem('LOGIN_TOKEN',JSON.stringify(data.data));
                            me.$emit('login-success',false);
                            me.submitData = {
                                empCode: '',
                                password:''
                            };
                        } else{
                            tip.show = true;
                            tip.text = data.msg;
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                        tip.show = true;
                        tip.text = error;
                    });

            }
        }
    }
script>

<style scoped>
    .login-bg{
        /*background-image: url("../assets/bg.jpg");*/
        background-image: url("../assets/bg-2.jpeg");
        background-position: center;
        background-size: cover;
    }
style>

关键在于这句话，触发父组件的事件

me.$emit('login-success',false);

当用户身份过期需要登录的时候

登陆成功之后隐藏登录面板，继续之前没完成的操作

 

转载于:https://www.cnblogs.com/LUA123/p/10573535.html