03 父子组件sync&update

 1 <template>
 2   <el-container class="consele-container">
 3     
 4     <el-container>
 5       <el-header height="70px">
 6         <comp-console-head :is-fold.sync="isFold"></comp-console-head>
 7       </el-header>
 8 
 9       <el-main>Main</el-main>
10     </el-container>
11   </el-container>
12 </template>
13 
14 <script>
15 
16 import CompConsoleHead from "../../components/console/CompConsoleHead";
17 export default {
18   name: "ConseleIndex",
19   components: {
20     CompConsoleHead
21   },
22   data() {
23     return {
24       isFold: false //是否折叠默认是不折叠 打开状态
25     };
26   },
27   methods: {
28     
29   }
30 };
31 </script>

 1 <template>
 2   <el-card class="box-card" :body-style="cardStyle">
 3     <el-row>
 4       <el-col :span="22">
 5         <i :class="isFold?‘el-icon-s-unfold‘:‘el-icon-s-fold‘" @click="handleIconClick"></i>
 6       </el-col>
 7      
13     </el-row>
14   </el-card>
15 </template>
16 <script>
17 export default {
18   name: "CompConsoleHead",
19   props: {
20     isFold: {
21       type: Boolean,
22       required: true
23     }
24   },
25   data() {
26     return {
27       cardStyle: {
28         padding: "20px 0 20px 20px "
29       }
30     };
31   },
32   methods: {
33     handleIconClick() {
34       this.$emit(‘update:isFold‘,!this.isFold)
35     }
36   }
37 };
38 </script>
39