父子组件传值，子组件复用

迈不过友情╰ 2023-02-16 12:03 12阅读 0赞

busiFormManageView.vue //数据表单标准查看

# 父子组件： #

1.父组件在里 **加入:showEdit="showEdit"**  
子组件**通过props来引用**：直接在export default 里写入 不在生命周期里

props:{ 
        showEdit:{ 
          type:Boolean,
          default:true
        }
      },

## 2.父组件里面自己去掉设置图标 ##

直接去掉就可以了  
<icon  
v-hasPermission="‘41’"  
class=“setting-icon”  
name=“shezhi”  
@click.native=“microspot(41, ‘类目导航’, showEidtCate)”  
/>

## 3.父子组件之间：使用布尔值控制的 ##

原因是：需要有的父组件显示全部 有的父组件去掉部分

父组件：
    	在return里面定义showEdit:false,
    
    	在要引入的子组件<lm>加入:showEdit="showEdit"//这个组件里包含按钮和表格操作栏
    	
    
    子组件：
    	子组件通过props来引用：直接在export default 里写入  不在生命周期里

props:{ 
        showEdit:{ 
          type:Boolean,
          default:true
        }
      },

### 3.1 操作一： 去掉组件里的按钮：在要去掉的按钮下：v-if=“showEdit” showEdit是自己定义的 ###

### 3.2 操作二：去掉子组件里的操作栏 ###

法一：直接在columns的操作列加入（this.showEdit&&{	}）||{ width:0.1 }
    	如果不加||{ width:0.1 }表格就显示不出来  括号也要注意  括起来的
    
    法二：把listColumns里的操作栏剪切	
    created()里面写入操作列  通过if（this.showEdit）来判断  ，用push方法加入this.listColumns.push
    这里操作在 mounted周期里有问题，所以改到created