模板网首页 > 建站教程 > vue教程,AngularJS教程 >  子组件更改props的值,报错正文

子组件更改props的值,报错

    我爱模板网在用vue-cli做一个confirm弹窗组件时,遇到了一个问题:当弹窗子组件弹出时,报错(弹窗我用的是iview的model组件):
01//父组建:
02<myConfirm :isShow="isShowConfirm" :title="title" :content="content"></myConfirm>
03 
04import { myConfirm } from "@/components";
05 
06components:{
07    myConfirm
08},
09data() {
10    return {
11        title:'提示',
12        content:'是否删除?',
13        isShowConfirm:false,
14    };
15},
16 
17methods:{
18    doDel(){
19        let ids = [];
20        const that = this;
21        that.isShowConfirm = true//让组件显示
22    },
23}
24 
25//子组件:
26<template>
27    <div class="confirm">
28        <Modal v-model="isShow" width="320" class-name="loginout-model" :closable="false" @on-ok="onOk" @on-cancel="onCancel">
29            <div style="text-align:center">
30                <h3>{{title}}</h3>
31                <p>{{content}}</p>
32            </div>
33        </Modal>
34    </div>
35</template>
36 
37export default {
38  components: {
39  },
40  props: ['isShow','title','content'],
41  data(){
42    return {
43    };
44  },
45  watch:{
46  },
47  created() {
48  },
49  computed:{
50  },
51  methods: {
52    onOk(){},
53    onCancel(){}
54  },
55  mounted(){
56  }
57};
    这时,点击父组建的删除,的确可以弹出子组件,当点击子组件的取消或者确认按钮,总之更改了isShow,就会报错:
[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: "isShow"

    这是因为子组件的v-model更改了isShow的值,而在VUE中,子组件是无权限更改props的。所以,得借助“第三者”,这里就不详细探讨了,可以查看《如何在Vue2中实现组件props双向绑定》,写的很好,一看就明白了,下面贴出修改代码:
01//父组建:
02<myConfirm :isShow="isShow" :title="title" :content="content" @closeConfirm="closeConfirm"></myConfirm>
03 
04import { myConfirm } from "@/components";
05 
06components:{
07    myConfirm
08},
09data() {
10    return {
11        title:'提示',
12        content:'是否删除?',
13        isShow:false,
14    };
15},
16 
17methods:{
18    doDel(){
19        let ids = [];
20        const that = this;
21        that.isShow = true//让组件显示
22    },
23    closeConfirm(val){
24        //子组件通知父组件更改isShow(并非子组件更改isShow)
25        this.isShow = val;
26    }
27}
28 
29//子组件:
30<template>
31    <div class="confirm">
32        <Modal v-model="showFlag" width="320" class-name="loginout-model" :closable="false" @on-ok="onOk" @on-cancel="onCancel">
33            <div style="text-align:center">
34                <h3>{{title}}</h3>
35                <p>{{content}}</p>
36            </div>
37        </Modal>
38    </div>
39</template>
40 
41export default {
42  components: {
43  },
44  props: ['isShow','title','content'],
45  data(){
46    return {
47        //强行更改isShow会报错,因为子组件更改props,不会影响父组件,props只能父组件改变,子组件没有权限改变
48        //这里创建一个showFlag作为isShow的副本,更改showFlag就会更改isShow,就会影响到父组件的isShow,否则父组件的isShow不会变化
49        showFlag:this.isShow
50    };
51  },
52  watch:{
53        //因为isShow是父组件改变,而子组件没有用它来显示,而使用它的副本showFlag来更改显示,所以isShow被父组件更改了,要实时更新到showFlag上。
54        isShow(val){
55            this.showFlag = val;
56        },
57        //监听当showFlag变成flase的时候,通知父组件将isShow也变成false,否则下次点击,将不会弹出
58        showFlag(val){
59            if(!val){
60                this.$emit('closeConfirm',val);
61            }
62        }
63  },
64  created() {
65  },
66  computed:{
67  },
68  methods: {
69    onOk(){},
70    onCancel(){
71        this.showFlag = false
72    }
73  },
74  mounted(){
75  }
76};

0
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢