zoukankan      html  css  js  c++  java
  • 子组件的显示隐藏控制

    1.props传值

    父组件中:

    <!-- 更新广告 组件使用位置 -->
          <UpdateAdvert
            :updateAdvertFormVisible="updateAdvertFormVisible"
            @closeUpdateAdvert="closeUpdateAdvert"
            :updateAdvertInfo="updateAdvertInfo"
          ></UpdateAdvert>
    <!-- 子组件点击关闭时需要触发的函数 -->
    closeUpdateAdvert() {
          this.updateAdvertFormVisible = false;
          this.updateAdvertInfo = [];
        },

    子组件中:

    <!-- 接收父组件传过来的数据-->
    props: ["updateAdvertFormVisible",'updateAdvertInfo'],
    <!-- 因为变量定义在父组件中,子组件无法改变父组件的值。所以需要触发父组件的方法改变值-->
    closeUpdateAdvert() {
        this.$emit('closeUpdateAdvert')
     },

    2.refs控制

    父组件中:

    <!-- 组件使用位置 -->
    <editRedEnvelop ref="edit-red-envelop" @getPacketsData='getPacketsData'></editRedEnvelop>
    <!-- 传值位置 -->
    handleEditBtn(index,row){
          this.$refs["edit-red-envelop"].editRedPacketsFormVisible = true //变量
          this.$refs["edit-red-envelop"].envelopInfo(row) //函数
        },

    子组件中:

    <!-- 声明变量 -->
    editRedPacketsFormVisible: false,
    <!-- 声明函数接收传过来的值 -->
    envelopInfo(row){}

    3.$children

    3.1当父组件有且仅有一个子组件时
    // dialog为子组件声明的变量
        this.$children[0].dialog = true
    

      3.2 当父组件中有多个组件时,如图:

     由于组件包裹在了el-card中,所以需要先获取到el-card,然后再获取组件,直接获取为undefined。代码如下:

    // 循环遍历children,根据data值获取所需要的组件
      this.$children[0].$children.forEach(function(ele){
        console.log(ele.screenName);
        if(ele.dialog) {
          ele.dialog = true
        }
      })
    

    如果在子组件使用$parent获取父组件的值,也要注意层级的关系。以上图为例:

    组件AddAccount想要获取父组件的值时,需要使用this.$parent.$parent。第一个$parent获取到的是el-card,第二个$parent才是template。

    this.$parent.$parent.accountList
    

     更多内容请参考:https://www.cnblogs.com/dhui/p/12926794.html

  • 相关阅读:
    pandas分组聚合基本操作
    微信开发系列----01:成为开发者
    未能加载文件或程序集“System.Web.Http.WebHost, Version=4.0.0.0, ”或它的某一个依赖项。系统找不到指定的文件。
    ADO.NET基础巩固-----连接类和非连接类
    ADO.NET封装的SqlHelper
    Jmeter + Grafana + InfluxDB 性能测试监控
    性能测试监控:Jmeter+Collectd+Influxdb+Grafana
    性能测试总结(一)---基础理论篇
    地铁模型分析性能测试
    JIRA问题状态已关闭,但是解决结果还是未解决
  • 原文地址:https://www.cnblogs.com/cuipingzhao/p/15252371.html
Copyright © 2011-2022 走看看