父组件传给子组件是基本数据类型。
父组件
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