Vue学习(十六)——子组件样式无法继承

在写侧边栏时，将二级菜单作为一个单文件组件抽离出来之后，发现样式完全不同。说明父组件的样式并没有继承给子组件。有三种解决方案：

（1）想办法将父组件的样式继承给子组件。

          样式传值发生在相同element之间，在父组件中并不包含a-menu-item这样的子组件，所以不存在传值这种需求。

（2）sub-menu的属性发生了改变，所以可以找到ant-design-vue sub-menu组件的样式，将其复制黏贴到子组件中。

         但是之前已经在main.js中全局引入了Antd，a-menu-item已经引入了，所以是可以直接用的。现在的问题是a-menu-item已经引入了，但是其样式都消失了，只能自己写样式，包括a-menu-item内的文字的样式也要自己写。因为组件和样式是全局引入的，所以a-menu-item的样式在单文件中消失了，是一件非常奇怪的事情。按照道理说样式消失了，也就是a-menu-item整个失效了，但是将a-menu-item改成div，则不行。

（3）将sub-menu写成函数式的组件，变量只是子组件的数值而不是样式，这样样式就保留下来了。

         这种方式是最简单的，但是尝试了不行。总是提示props.child的propsData没有定义。还需要进一步的找原因。

 

尝试1：theme是油画的底色，在某一部分画上某种颜色，就会覆盖这种底色，但是如果没有画的话，就会保留底色。不管某个部分是不是一个单文件组件。单文件组件如果没有设置背景色，那么它就是透明的，摆在画布上呈现的还是原有画布的颜色。

<a-layout-sider>    //没有配置style，但是在这里也显示出深蓝色的背景色。即默认深蓝色。如果配置成红色背景，则menue除开logo以及menue之外的部分就是红色。

                  <a-menu>            //theme="dark"，这个主题包括了a-menu, <a-sub-menu> 以及   <a-menu-item>的配置，后两者不用再配置。

                                               //如果没有配置theme="dark"，则默认theme="light"

                                               //theme相当于是一个底色，而且是用油画，所以在theme之后在<a-sub-menu>,  <a-menu-item>上配置各种style都会覆盖theme的基本配色。所以不用担心冲突的问题。

                          <a-sub-menu>   

                                   <a-menu-item>

尝试2：如果是融合式的，则点击二级菜单会有hover，会整行变成蓝绿色,同时文字也会高亮。但是如果是单文件组件则无法整行变成蓝绿色，文字也无法高亮。

 

尝试3：终于成功。

       AntD中认为a-menu-item不能单独存在，在融合文件中是有上下文的，a-menu-item上下都有sub-menu，可以说明这个item隶属于哪个目录。但是在单文件中，a-menu-item是没有上下文的，现在看来在AntD中不允许。在数据结构中有分型，所以被分成单文件之后，单文件也应该和它的上一级目录共享一个统一的架构，所以单文件也应该是从a-menu或者a-sub-menu开始。为什么这两个都可以，是因为这个统一的架构指的是目录+目录下的项目，并不包括目录+子目录+子目录下的项目，因为有的时候目录下并没有子目录，所以这个架构不是一个统一的架构。唯一普适的架构是目录+目录下的项目。为啥它不用a-menu+a-menuItem(a-menu+a-menuItem)的方式呢？我想可能是为了区分有下一级的menu-item和没有下一级的menu-item，因为如果有下一级，就必定有一个下拉箭头，同时下一级的文字标题也应该跟上一级有tab的关系，还有就是下一级分支的块的颜色要跟上一级分开，这些如果让人自己去写很麻烦，所以可以把这些css样式都封装在一个叫sub-menu的menu-item中，以区别没有下一级分支的menu-item。

      以上尝试回答了三个问题：

     （1）一个是为什么单文件中不能把a-menu-item拿过来直接用，因为分型结构，a-menu-item也是一个小菜单，所以要按照菜单的架构写。

     （2）为什么在subMenu这个函数式单文件中的a-menu-item前面加上a-sub-menu就会出现有下拉箭头的一行，是因为a-sub-menu就是认为有下一级分级，所以将下拉箭头封装好了。而又没有在sub Menu中加slot写标题，所以是空白的一行。

    （3）为什么这样写了以后，subMenu组件中的a-menu-item的颜色和SiderMenu中sub-menu的组件的颜色是一样的呢？ 因为在subMenu组件中确实设置了theme是dark，而a-menu-item又被认为没有下一级分支，所以程序认为它跟SiderMenu中的subMenu的级别是一样的，都是一级目录，所以在相同的主题下面，同样级别的element就是同样的颜色了。如果在subMenu组件里面不要<a-menu>而是换成<a-sub-menu>:

           a)如果是单文件组件，则完全不识别，因为统一的架构是a-menu,所以最外层一定要写<a-menu>

           b) 如果是函数式组件。会将其插到SiderMenu组件中的上下文中，发现sub-menu外面还包了一个sub-menu，也就是说本sub-menu是二级目录，所以颜色是深蓝色的，跟之前融合文件中二级目录的颜色一样。现在为止颜色的问题都明白了。

    （4）跟小马的写法不同造成的效果不同。小马的程序默认数据的结构是多样的，将一级标题分成item和sub-menu来区分，数据里面没有child就写成item，如果有child就写成sub-Menu，所以他其实是将sub-Menu整个都抽离出来形成了一个组件。而我默认数据所有部分的架构都是一样的，所以我是将sub-menu里面的a-menu-item单独抽出来写成一个组件，因此将sub-menu和他下属的a-menu-item强行分开了，打破了一些既有的封装，所以效果没有这两个本来就绑在一起的好。

            小马那个也是函数式组件，但是由于a-sub-menu在该组件插回到SiderMenu中的时候，它的外层是a-menu,所以就知道这个subMenu中的a-sub-Menu是一级标题，所以就会显示一级标题的颜色，它往下的二级标题会用更深的颜色显示。

            到现在为止，问题已经完全得到了解答。