【Vue】6.解决父组件向子组件传值修改以后再传回父组件的问题
在vue2.0中父组件向子组件传入一个值,这个值在子组件里面被改变以后再传回父组件,这个时候vue组件会报错:[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data o...
·
在vue2.0中父组件向子组件传入一个值,这个值在子组件里面被改变以后再传回父组件,这个时候vue组件会报错:
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "dialogShow"
在vue2.0中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribute传递给props组件内,组件内只能被动接收组件外传递过来的数据,并且在组件内,不能修改由外层传来的props数据,组件内不能修改props的值,同时修改的值也不会同步到父组件,父组件不知道子组件内部当前的状态是什么,因为dailogShow不可写,所以需要在data中或者computed中创建一个副本 dailogShow变量,初始值为props属性dailogShow的值,同时在组件内所有需要调用props的地方调用这个data对象。
子组件:Landing001.vue
<template>
<div v-if="dialogShow" class="dialog-bg">
<div class="dialog" :class="{'dialog-show':dialogShow}">
<div class="dialog-title">手机号验证</div>
<p class="dialog-description">完成手机号验证,可在有信背调公众号登录</p>
<div class="dialog-form">
<input class="dialog-form-input" type="text" v-model="mobileCode" placeholder="请输入短信验证码"/>
<span class="dialog-form-code" @click="getVerificationCode">获取验证码</span>
</div>
<div class="dialog-btn">
<button class="dialog-cancel" @click="cancelDialogBtn">取消</button>
<button class="dialog-submit" @click="submitDialogBtn">确定</button>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
dialogShow: {
default: false,
type: Boolean,
request: true,
},
mobile: {
default: '',
type: String,
request: true,
},
},
data() {
return {
mobileCode: '',
childDialogShow: this.dialogShow,
};
},
created() {
console.log(`DialogComponent:${this.dialogShow}`);
console.log(`DialogComponent childDialogShow:${this.childDialogShow}`);
},
computed: {
dialogShowAndCode() {
return {
dialogShow: this.childDialogShow,
code: this.mobileCode,
};
},
},
methods: {
getVerificationCode() {
// console.log(this.userInfo.mobile);
// todo-jack check mobile number format
},
cancelDialogBtn() {
// this.dialogShow = false; 这里直接修改props里面的值
// this.$emit('childByValue', this.dialogShow); 传回父组件就会报错
this.childDialogShow = false;
this.$emit('childByValue', this.dialogShowAndCode);
},
submitDialogBtn() {
this.childDialogShow = false;
this.$emit('childByValue', this.dialogShowAndCode);
},
},
};
</script>
父组件:Landing.vue
<template>
<div id="first">
<div class="form-btn-submit">
<button class="btn-submit" @click="userInfoSumit">提交</button>
</div>
<dialogcomponent :dialogShow="dialogShow" v-on:childByValue="childByValue"></dialogcomponent>
</div>
</template>
<script>
import dialogcomponent from '../../components/DialogComponent.vue';
export default {
data() {
return {
name: 'landing001',
dialogShow: false,
};
},
methods: {
userInfoSumit() {
this.dialogShow = !this.dialogShow;
},
childByValue(childValue) {
// this.dialogShow = childValue; 报错
this.dialogShow = childValue.dialogShow;
console.log(this.dialogShow);
console.log(childValue.code);
},
},
components: {
dialogcomponent,
},
};
</script>
更多推荐
已为社区贡献20条内容
所有评论(0)