zoukankan      html  css  js  c++  java
  • 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 
  • 相关阅读:
    PHP命名空间
    php各个版本的区别
    MySQL的读写分离---主从复制、主主复制
    redis的安装和php的redis扩展
    php的设计模式
    git命令详情
    memcache和redis的对比
    mysql性能优化
    MySQL的分区、分表、集群
    nginx的反向代理和负载均衡
  • 原文地址:https://www.cnblogs.com/xiaoliziaaa/p/13084183.html
Copyright © 2011-2022 走看看