vue中子组件修改父组件中传递的参数的值

方法一：

 1 <!--父组件代码-->
 2 <template>
 3   <div>
 4     <p>我是父组件</p>
 5     <button @click="handleShowChild" v-show="!isVisibleChild">显示子组件</button>
 6     <child :visible = 'isVisibleChild' @handleHideChild="handleHideChild"></child>
 7   </div>
 8 </template>
 9 <script>
10 import child from './child'
11 export default {
12   data(){
13     return {
14      isVisibleChild: false
15     }
16   },
17   components:{
18     child
19   },
20   methods:{
21     handleShowChild(){
22       this.isVisibleChild = true;
23     },
24     handleHideChild(flag){
25       this.isVisibleChild = flag;
26     }
27   }
28 }
29 </script>
30 
31 <!--子组件代码-->
32 <template>
33   <div v-show="visible">
34     <p>我是子组件</p>
35     <button>隐藏子组件</button>
36   </div>
37 </template>
38 
39 <script>
40 export default {
41   name:'child',
42   props:{
43     visible: {
44       type: Boolean,
45       default: false
46     }
47   },
48   methods:{
49     handleHideChild(){
50       this.$emit('handleHideChild',false)
51     }
52   }
53   
54 }
55 </script>

方法二：sync+update方法

 1 <!--父组件代码-->
 2 <template>
 3   <div>
 4     <p>我是父组件</p>
 5     <button @click="handleShowChild" v-show="!isVisibleChild">显示子组件</button>
 6     <child :visible.sync = 'isVisibleChild'></child>
 7   </div>
 8 </template>
 9 <script>
10 import child from './child'
11 export default {
12   data(){
13     return {
14      isVisibleChild: false
15     }
16   },
17   components:{
18     child
19   },
20   methods:{
21     handleShowChild(){
22       this.isVisibleChild = true;
23     },
24   }
25 }
26 </script>
27 
28 <!--子组件代码-->
29 <template>
30   <div v-show="visible">
31     <p>我是子组件</p>
32     <button>隐藏子组件</button>
33   </div>
34 </template>
35 
36 <script>
37 export default {
38   name:'child',
39   props:{
40     visible: {
41       type: Boolean,
42       default: false
43     }
44   },
45   methods:{
46     handleHideChild(){
47       this.$emit('update:visible',this.visible=false)
48     }
49   }
50   
51 }
52 </script>