Vue 报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

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

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

比如：我的父组件是普通页面，子组件是弹窗的登录界面，父组件传递的数据（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-times</v-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);

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

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

巴特西

Vue 报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

最新文章

热门文章