Vue学习（十五）——vue遇到的坑

（1）用cli-3新建了一个项目，代码run没有提供错误，但是浏览器程序员模式提示：

        “ You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.”

          解决方案:在vue.config.js  配置：

module.exports = {
    runtimeCompiler: true
}

   （2）任何一个组件写成之后一定要export defaults{name:"XXX"}，就好像做成了一个产品要告诉别人这个产品的名字，不然别人无法引用。

             判断是否忘记export name，可以把鼠标放在使用这个组件名字的上方，如果可以弹出这个组件的来源说明就引用成功了。如果没有，就说明他们找不到这个组件的出处，很有可能是没有export name。

（3） ant-design-vue的源代码是可以使用的，但是数据是写死的，有两种改造方式：

         a.使用花括号将数据传进去

         b. 将这些组件重新封装一下，可以省却很多重复的语句。      

(4)   可以显示模板中的字符，但是无法显示样式。原来是在入口文件中没有引入antd的样式以及less语言。所以说就算npm install less，也还是需要import一下。但是less和css不用再use，因为他们全部要用到，打包会全部打，不存在挑出来一部分打包的情况。

import 'ant-design-vue/dist/antd.css';
import "ant-design-vue/dist/antd.less";

（5）可以显示样式了，但是整个模板在浏览器中高度只有70%左右。在app.vue中设置了

#app{
  height: 100% ;
}

也没有用。

后来是在BasicLayout这个组件中配置的：

<a-layout id="components-layout-demo-custom-trigger" style="min-height: 100vh">

（6）快捷键小tips：

        多行注释：ctrl+/

       多行tab缩进：tab 或者shift+tab

（7） 如果在同一行有一个图片加一个标题文字，那么文字一定要使用css：

display: inline

说明这几个字是位于前面一个元素（图片）的同一行的。就会在本行接着前面的元素继续往下打印。

如果是配置：display: inline-block

就会先计算本行还有多少空间，如果该空间无法容纳作为一个块的标题，则这个块就在父组件其他的空间内换行展示。

总而言之，只要是碰到有文字和图片（或者文字）放在同一行的情况，就要给文字配置display:inline，图片不用。因为图片本来就是一个块了。

(8) 在新版的Vue中，

v-for="item in menuData"后面一定要有一个 :key="item" 不然会报错。

v-for可以用于<template>或者真实的element中，但是:key就一定要绑定在真实的element中，比如<div>或者<a-menu>之类的。

(9) 配置了selectedKey和OpenKey之后出现了点不开二级菜单的问题。去掉就可以了

 <a-menu
                mode="inline"
                theme="dark" >
<!--                :selectedKeys="selectedKeys"-->
<!--                :openKeys.sync="openKeys"-->

可是为什么呢？

（10）点击一级标题下的二级标题，结果所有的二级标题的显示了高亮。

          这是因为这些二级标题的class是一摸一样的，所有当触发了class成为某个名字的时候，等于这个名字的所有的div的css样式都变了。

         之前的class是用subIndex来表示的，但是所有的subIndex都是0，1,所以存在重复。

         因此将父组件中一级标题的key传过来，用父组件的key和子组件的key合成一个数值，这个数值就是唯一的，不会重复的。

        父组件：

<sub-menue  :sub-menue-info="item['subContent']"
            :key="'sub'+index"
            :childKey="'sub'+index">
</sub-menue>

       函数式子组件：

<a-menu-item :key="subIndex+props.childKey"><span>{{subItem['content']}}</span></a-menu-item>

        配置之后，即可。

以上是函数式组件，如果改成单文件组件的话：

也是一样的，只是二级标题的字体往前挪了，但是点击还是会呈现蓝色高亮。这是因为<a-menu><a-menu-item>自带的属性，会点击高亮，只要key值不同，就不会有所有二级标题同时高亮的情况。以上都是函数式组件，但是如果是单文件组件，则会出现先点击一个二级菜单项，再点击其他sub-menu下的二级菜单项的话，之前的二级菜单项的高亮会保留。而如果使用函数式组件的话则没有这种情况。这是因为函数式组件sub-menu下面是a-menu-item，这两者只要Key值各自都是唯一的，就可以做到点到一个另外一个就可以灭掉，不管这两个二级组件他们是不是在同一个sub-menu下面。我猜测ANTD是通过将key值赋值给class，而使得每个class的值不同的。而单文件组件情况下，sub-menu下面是sub-Menu这个自定义组件，不是antV定义的组件。sub-Menu内部可以根据a-menu/a-menu-item这种模式，同一个之间一组item中只有一个高亮，且范围局限在a-menu这个标签下。同时，由于a-menu默认就是一个菜单的所有，所以不存在下面的menu-item还要去跟别人关联这种事情，所以menu-item的状态只会在本a-menu中生效。而单文件只能在最外层写a-menu，因此在没有办法跳出自己的局限a-menu。所以此处一定要用函数式的方法。

    这里冒出来一个问题：antD在封装组件的时候，应该是有一个style选择器： <a-menu-item style:"panduan?style1:style2">   这里panduan是表示是否选择了这个item，而这个选择应该有个this啥的，或者配置selectedkeys，但是这里都没有，也完成了这样的效果，就不知道怎么做的了。

 （11）使用@click在BasicLayout以及SiderMenu里面都可以用，但是在SubMenu里面不能用，总是没有反应。

           这是因为SubMenu是函数式组件，无法做到响应式，所以所有需要相应的什么按钮之类的在这个组件中都不会起作用。

           但是如果不是函数式组件的话，用单文件组件的话，则subMenu点击高亮就只在某个范围内有效，会同时出现多条高亮的情况。

          所以只能用函数式组件。

          但是如果用了函数式组件的话，则点击二级菜单无法将自己的index值传到祖父组件，从而无法触发BasicLayout去选择content里面的内容是什么。

          所以只有两种方式：

         （1）一种是使用router.js，在meta里面携带二级菜单的内容，在router里面直接做导航菜单和对应内容的一个映射，这样就不用将二级菜单的index传递给content了；

                 但是这种方式的问题在于，如果是从服务器传过来的菜单栏的内容，如何传递到router.js中给它填充到meta中呢？

          （2）第二种是将subMenu和menu-item不拆开，都写在subMenu中，这样click就有用了，同时也可以将子组件的index传递给父组件用于content的选择了。貌似这种方法更加简单。但是它的配置更加繁琐。首先在subMenu中要配置一遍二级标题，然后要在Basiclayout中配置一遍二级标题和内容组件的映射关系，在这里二级标题的index用了两次，需要打开两个文件配置。但是router的话二级标题或者其index只用了一次，而且只在一个文件中配置。如果路由很多的话，配置量是很大的。所以第二种方式可以尝试一下，但是最终还是要使用router.js的方式。

(12) 

<template >
    <div>
        <a-menu mode="inline" theme="dark">
            <template  v-for="(item,index) in menuData">
                <a-menu-item
                        v-if="!item.children"
                        :key="'level1'+index">
<!--                     <span slot="title" >-->  //a-menu-item是不可分解的，它所处的层级不会是一个标题，所以不能用slot="title"
                        <a-icon :type="item.meta['icon']" ></a-icon>
                        <router-link :to="{name:item['name']}" tag="span">
                            {{item.meta['content']}}
                        </router-link>
<!--                    </span>-->
                </a-menu-item>
                <a-sub-menu
                        v-else
                        :key="'level1'+index" >
                    <span slot="title" >
                        <a-icon :type="item.meta['icon']" ></a-icon>
                        <span>{{item.meta['content']}}</span>
                    </span>
                    <template v-for="(subItem,subIndex) in item['children']">
                        <a-menu-item :key="'level1'+index+'level2'+subIndex">
                            <a-icon :type="subItem.meta['icon']" ></a-icon>
                            <router-link :to="{name:subItem['name']}" tag="span">
                            {{subItem.meta['content']}}
                            </router-link>
                        </a-menu-item>
                    </template>
                </a-sub-menu>
            </template>
        </a-menu>
        <button @click="routeData">nihao</button>
    </div>

</template>