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 
  • 相关阅读:
    java selenium (十) 操作浏览器
    java selenium (九) 常见web UI 元素操作 及API使用
    java selenium (六) XPath 定位
    正则表达式
    日志模板
    软件开发规范
    TCP协议的粘包现象和解决方法
    验证用户的合法性
    PythonDay16
    PythonDay15
  • 原文地址:https://www.cnblogs.com/xiaoliziaaa/p/13084183.html
Copyright © 2011-2022 走看看