Vue学习笔记

Slot

slot是一个插槽，用于将父组件中的内容传递到子组件上面

<父组件>
<子组件>
{{父组件传给子组件的值}}
</子组件>
</父组件>

<子组件>
<slot>
显示父组件传给子组件的值
</slot>
</子组件>

作用域插槽

<父组件 >
<子组件 >
<template v-slot="myslot">
{{myslot.slotData}}
</template>
</子组件>
</父组件>



//在子组件当中的代码
<slot :slotData="子组件Data中的数据">
</slot>

solt具名插槽

//NameSlot组件
<div  class="container">
<slot name="header"></slot>
<slot></solt>
<slot name="footer"></slot>
</div>




<NameSlot>
<template v-slot="header">
{{header slot中的数据}}
</template>
{{ slot 中的数据}}
<template v-slot="footer">
{{footer slot中的数据}}
</template>
</NameSlot>

动态组件

<component :is="data中的数据"></component>


export default{
components:[ xxx];

}


data(){
data中的数据：组件名xxx

}

组件的异步加载

概念：传统的组件加载，无论有没有真正用到组件，都会进行加载，如果组件的体积较大，并且组件并没有在页面当中使用到，这就造成了网络资源的浪费，而异步加载组件的方式，什么时候用到组件，什么时候加载组件，如果一直没有用到组件，就不去加载组件。

//传统的组件加载方式
import xxx from './xxx';

export default(){
component :{
xxx
}
}

//异步加载组件的方式

export default(){
component :{
xxx:()=>import ('../xxx')
}
}

组件缓存

keep-alive:组件频繁切换，不需要重复渲染

<keep-alive>
<A v-if:"state===A"/>
<B v-if:"state===B"/>
<c v-if:"state===C"/>
</keep-alive>

mixin

对于公用的逻辑代码，可以通过mixin的方式调用，而不需要再写一遍

import myMaxin from "./xxx"

export default{
mixins:[myMaxin],//可以添加多个，会自动合并起来
data(){
return{
name:lihua,
age:16}
},
methods:{}
}

Vue-router

Vue-router路由模式

hash模式：http：//abc.com/#/user/10

H5 history模式：http：//abc.com/user/20

 const router =new VueRouter({
    mode:'history',
    routes:[...]

})

后者需要server端支持，因此无特殊需求，可选择前者。

Vue-router动态路由配置

const user={
template:<div> User{{$route.params.id}}</div>
};

const router=new VueRouter({
//能够匹配/user/10或者/user/20
routes:[path:'/user/:id',component:User]
});

Vue懒加载

const router=new Vuerouter({
routes:[
{  path:'/',
   component:()=>import('../component/xxx');
},
{  path:'/next',
   component:()=>import('../component/yyy');}
]
});
//当在url中输入/路径，xxx组件加载，yyy组件不加载，而只有在输入/next路径的时候，yyy组件才会加载