子组件的显示隐藏控制

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