Vue 使用细节收集

JSX 中 on 开头的属性名

在用 elementui 中的 el-upload 的时候，他们组件中有一个属性 on-change ，也不知道谁想出来的属性名，太扯淡了，非要 on 开头，我开始的代码如下：

<el-upload
        action="/"
        list-type="picture-card"
        class="createopt__picupload"
        auto-upload={false}
        show-file-list={false}
        file-list={cellValue}
        accept=".gif,.png,.jpg,.jpeg"
        on-change={this.createOptPicUploadChange}
>
        <i class="el-icon-plus"></i>
</el-upload>

发现并不执行 createOptPicUploadChange 这个函数，看了一下编译后的代码，编译如下，居然把 on-change 编译到 on 里面去了，不正常，我要编译到 attrs 中才算正常啊

        "el-upload",
              {
                attrs: {
                  action: "/",
                  "list-type": "picture-card",
                  "auto-upload": false,
                  "show-file-list": false,
                  "file-list": cellValue,
                  accept: ".gif,.png,.jpg,.jpeg"
                },
                "class": "createopt__picupload",
                 on: {
                  "change": _this.createOptPicUploadChange
                }
              },

后来我看了一下 babel-plugin-transform-vue-jsx 中编译源码，发现了关键字 props|domProps|on|nativeOn|hook，居然有 on 开头的就编译成了函数，我就改成了 propsOn-change={this.createOptPicUploadChange}，再看编译结果：

              "el-upload",
              {
                attrs: {
                  action: "/",
                  "list-type": "picture-card",

                  "auto-upload": false,
                  "show-file-list": false,
                  "file-list": cellValue,
                  accept: ".gif,.png,.jpg,.jpeg"
                },
                "class": "createopt__picupload", props: {
                  "on-change": _this.createOptPicUploadChange
                }
              },

on-change 跑到 props 下了，再执行，成功。多看源码还是有好处的....

style 标签中深度作用选择器

以前就发现一个问题，当在 style 上加一个 scoped 的时候，子标签、孙子标签里面的样式就无法生效了，一直找不到解决方式，今天看文档找到了，在需要受影响的子标签或者是孙子标签的父标签后面加上 >>> 或者 /deep/，Scss 中无法解析 >>>。例如：

注意：选择器和 >>> 或者 /deep/ 之间有空格

.aaa /deep/ {
    .bbb{

    }
}