场景：父组件向子组件传递数据，子组件去试图改变父组件数据的时候。
![Vue 报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRaekl3TVRndVkyNWliRzluY3k1amIyMHZZbXh2Wnk4NE1UTTBOemd2TWpBeE9UQXpMemd4TXpRM09DMHlNREU1TURNeU1URTRNRGt3T0Rrd01DMHhNamMxTlRZek9UUXVjRzVuLmpwZw%3D%3D.jpg?w=700 "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](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRaekl3TVRndVkyNWliRzluY3k1amIyMHZZbXh2Wnk4NE1UTTBOemd2TWpBeE9UQXpMemd4TXpRM09DMHlNREU1TURNeU1URTRNVGN6TlRFeU15MDJNelkzTkRNeE9UTXVjRzVuLmpwZw%3D%3D.jpg?w=700 "Vue 报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders")
登陆成功之后隐藏登录面板，继续之前没完成的操作