01 | //父组建: |
02 | <myConfirm :isShow= "isShowConfirm" :title= "title" :content= "content" ></myConfirm> |
03 |
04 | import { myConfirm } from "@/components" ; |
05 |
06 | components:{ |
07 | myConfirm |
08 | }, |
09 | data() { |
10 | return { |
11 | title: '提示' , |
12 | content: '是否删除?' , |
13 | isShowConfirm: false , |
14 | }; |
15 | }, |
16 |
17 | methods:{ |
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 |
37 | export 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 | }; |
[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 |
04 | import { myConfirm } from "@/components" ; |
05 |
06 | components:{ |
07 | myConfirm |
08 | }, |
09 | data() { |
10 | return { |
11 | title: '提示' , |
12 | content: '是否删除?' , |
13 | isShow: false , |
14 | }; |
15 | }, |
16 |
17 | methods:{ |
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 |
41 | export 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 | }; |