场景:父组件向子组件传递数据,子组件去试图改变父组件数据的时候。
解决:子组件通过事件向父组件传递信息,让父组件来完成数据的更改。
比如:我的父组件是普通页面,子组件是弹窗的登录界面,父组件传递的数据(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);
当用户身份过期需要登录的时候
登陆成功之后隐藏登录面板,继续之前没完成的操作