03 父子组件sync&update

父组件传给子组件是基本数据类型。

父组件

 <template>
   <el-container class="consele-container">

     <el-container>
       <el-header height="70px">
         <comp-console-head :is-fold.sync="isFold"></comp-console-head>
       </el-header>

       <el-main>Main</el-main>
     </el-container>
   </el-container>
 </template>

 <script>

 import CompConsoleHead from "../../components/console/CompConsoleHead";
 export default {
   name: "ConseleIndex",
   components: {
     CompConsoleHead
   },
   data() {
     return {
       isFold: false //是否折叠默认是不折叠 打开状态
     };
   },
   methods: {

   }
 };
 </script>

子组件

 <template>
   <el-card class="box-card" :body-style="cardStyle">
     <el-row>
       <el-col :span="22">
         <i :class="isFold?'el-icon-s-unfold':'el-icon-s-fold'" @click="handleIconClick"></i>
       </el-col>

     </el-row>
   </el-card>
 </template>
 <script>
 export default {
   name: "CompConsoleHead",
   props: {
     isFold: {
       type: Boolean,
       required: true
     }
   },
   data() {
     return {
       cardStyle: {
         padding: "20px 0 20px 20px "
       }
     };
   },
   methods: {
     handleIconClick() {
       this.$emit('update:isFold',!this.isFold)
     }
   }
 };
 </script>