前端的样式穿透，修改其他组件内部定义的样式

咳咳，最近四个月都在写前端，虽然之前在2018年就学习并且在2019年的毕设上面使用了vue,但是总是没有像如今这般频繁使用，毕竟本人还是一个java开发工程师，对前端接触不深。但作为一个程序员总要向这个世界输出点什么，代码也好，博文也罢。来记录自己的脚印和踩过的坑！！！

简单谈谈这几个月遇到的问题以及解决的方案和收获吧，大佬勿喷。

1 前端需要修改组件类，其他类库的样式。比如我一个组件中引入了 elm ui ，需要修改他的样式。语法如下

.类名/deep/.类名{
   
    }

上具体的例子 .paneClass 是嵌套在el-collapse-item__header的 一个div样式。具体

    .panelClass/deep/.el-collapse-item__header{
        height: 35px;
        background-color: #F8F8F8;
        line-height: 32px;
        .titleClass{
            font-size: 12px;
            flex: 1 0 90%;
            order: 1;
            font-weight: bolder;
            color: #333333;
        }
        .panelClass{
            width: 208px;text-align: center;
        }
        i{
            margin-left: 10px;
        }
    }

第二个例子是G6 的浮动标题样式 当初官网文档提供的标题样式并未生效。现在回头看是样式没有穿透进去。代码如下

     <!-- 画布 这个是G6数据渲染出来的画布--> 
        <div ref="canvas" class="canvasPanel" :style="{'width':closeFlag ? '100%':'100%'}"></div>

 .canvasPanel/deep/.g6-tooltip {
      border: 1px solid #e2e2e2;
      border-radius: 4px;
      font-size: 12px;
      color: #545454;
      background-color: rgba(255, 255, 255, 0.9);
      box-shadow: rgb(174, 174, 174) 0px 0px 10px;
    }

 

2 父子组件数据双向绑定。这个点开发中非常常见并且之前我就有用过，但是老是忘记了那就先记录下来吧。

场景就是比如父组件一个数据控制了子组件的展开和关闭，子组件需要获取父组件的数据来控制开关，当关的时候需要修改父组件的数据。这里需要说明的是vue 官方是不推荐做数据的双向绑定的。

上代码

 这是一个父组件中子组件的定义，我们把 formInfoDialogFormVisible 这个boolean 的数据传递给子组件
<formInfoDialog  :model = model @formObject = "saveFormObject" :formInfoDialogFormVisible.sync = formInfoDialogFormVisible></formInfoDialog>

子组件声明获取此数据  
props: {
            'formInfoDialogFormVisible': Boolean,
            model: {
                type: Object,
                default: () => ({}),
            }
            },

 

  watch:{
            // 1 我们监听父组件给的formInfoDialogFormVisible，当他修改的时候赋值给子组件本地的一个chileFormInfoDialogFormVisible数据，
            // 这个就是控制子组件展开的开关。这一步完成了父组件对子组件的控制。
            formInfoDialogFormVisible(newValue,oldValue){
                this.chileFormInfoDialogFormVisible = newValue;
            },
    //         2 当子组件关闭的时候chileFormInfoDialogFormVisible 发生改变，发送一个事件告知父组件并且把修改后的值给父组件送过去。
    //        赋值给formInfoDialogFormVisible。这一步完成了子组件对父组件的控制
            chileFormInfoDialogFormVisible(newValue,oldValue){
                this.$emit('update:formInfoDialogFormVisible', newValue)
            },
        }

这样就完成了的数据的双向绑定。因为子组件是不能直接修改父组件给的数据所以需要这么做

vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。详细说明可以看官方文档 https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6

 

好了就先写这么多吧。下次再见啦