父组件和子组件的显隐控制

第一步：封装组件

建一个文件夹用来放置组件内容

第二步：父组件中引用子组件

这是子组件的name

三步引入

第三步： 编写子组件的内容

因为要在多处使用这个页面，所以才封装成为一个组件

第四步：效果

这是父组件

通过点击某一行进入子组件，效果是覆盖父组件的表格，展现出子组件的内容，通过v-if，以及，子传父的emit方法进行父子之间的传值
首先给父组件定义一个flag

再给引入子组件的地方else，当点击任何一行的时候，上面的父组件中的表格隐藏，子组件内容展示出来，现在需要返回到父组件展示的表格中，通过子组件中的某一个按钮返回

例如：

在这里给子组件中的返回按钮绑定一个事件，并且传递一个false给父组件，因为父组件就是通过定义了一个flag来控制父子组件之间的显隐的

//返回
        backBtn(){
          this.$emit('func',false)
        },

父组件再通过一个方法进行接收这个值即可

第五步：删除子组件中多余按钮

如果你写的一个组件中有 好多按钮，但是有一个页面中不需要其中的两个按钮，我们可以通过这种方式控制；
我的组件有5个按钮，但是有一个页面我只需要2个按钮就够了

在这个页面我只需要两个

首先给需要控制显隐的按钮绑定v-if

 <el-col style="float:left">
        <el-button size="mini" @click="backBtn">返回</el-button>
        <el-button size="mini" @click="replyBtn" v-if="replyShow">回复</el-button>
        <el-button size="mini" @click="forwardBtn">转发</el-button>
        <el-button size="mini" @click="deleteBtn" v-if="delShow">删除</el-button>
        <el-button size="mini" @click="trashBtn" v-if="trashShow">标为垃圾</el-button>
   </el-col>

再通过props进行父传子，通过父组件传递要不要这个按钮，来控制这个按钮的显隐

这是父组件中引用的时候绑定false就可以取消这个按钮的显隐

      <email-component :give-form-data="dataForm" @func="goBack" :star-show="false" :del-show="false" :reply-show="false" :trash-show="false" page-number = 3></email-component>

会这个逻辑，父子组件传值就差不多啦…