VUE笔记之 keep-alive , slot , $emit , props ,refs , eventbus,router,v-bind:src 路由获取参数,右击，阻止默认行为和冒泡

vue中使用less

安装less依赖，npm install less less-loader --save

 

vue项目优化之通过keep-alive数据缓存的方法

是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

1、缓存所有的页面,适用于每个页面都有请求的情况。方法如下，在需要缓存的router-view用keep-alive标签进行包裹起来。

1 2 3

将首次触发请求写到created钩子里边，就能实现缓存。比如从列表页，去了详情页，回来还是原来的页面。

2、缓存部分组件或者页面，使用router.meta这个属性通过判断的方法可以实现。方法如下：              

1 2 3 4 5

router设置如下：

1 2 3 4 5

routers:[      {  path: '/home',        name: home,        meta:{keepAlive: true}   // 设置为true表示需要缓存，不设置或者false表示不需要缓存                    }     ]

还可以通过新增的属性include/exclude来设置。见名思意，include包含的意思，exclude除了的意思。这里需要用到组件的名称即name来进行设置，所以name肯定就要加上了。 

加入 a,b组件需要缓存，c,d组件不需要缓存。写法如下：

1 2 3 4 5 6

 

 

单个slot

　　除非子组件模板包含至少一个  插口，否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的 slot 时，父组件整个内容片段将插入到 slot 所在的 DOM 位置，并替换掉 slot 标签本身。

　　最初在  标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。

 

 

 

我们发现写在 children模板内部的span被默认删除了。如果想让span显示那么此刻就应该使用slot。

这是父组件的内容 就会插入到slot标签中 并且将slot也给替换掉

 

 

具名slot

　　上面案例中讲解的是当组件的模板中有一个slot的方法，那么一个组件中如果想使用多个slot那么此时就应该使用具名slot。

　　 元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素。

　　仍然可以有一个匿名 slot ，它是默认 slot ，作为找不到匹配的内容片段的备用插槽。如果没有默认的 slot ，这些找不到匹配的内容片段将被抛弃。

可以设置多个插槽，将slot的标签内插入对应的内容，如果slot没有起名字 那么默认的就是default，渲染的时候就会把模板里面没有slot属性的内容拿过来渲染，模板里面没有slot属性的表示 slot=‘default’

 

vue中 关于$emit的用法

1、父组件可以使用 props 把数据传给子组件。

2、子组件可以使用 $emit 触发父组件的自定义事件。

vm.$emit( event, arg ) //触发当前实例上的事件

vm.$on( event, fn );//监听event事件后运行 fn；

 

例如：子组件：

父组件：