1.插槽
1.1 单个插槽
1.2 具名插槽
1.3作用域插槽:数据是子传父
注意:在2.5.0之前,必须使用到template身上
2.动态组件
2.1 keep-alive
什么情况下使用缓存:
1.1(单个插槽 )`父组件
<div class="parent">
<Child> //
//父组件
<p >我是插槽1</p>
<p >我是插槽2</p>
</Child>
</div>
子组件
<div class="child">
//子组件
<slot ></slot>
</div>`
效果图
在父组件引入子组件的地方中加入你所需要的内容,在子组件中的
标签内便可将组件的内容引入到特定的位置。另外,样式在父组件,子组件中都可以写,但父组件的样式会被子组件覆盖
1.2 具名插槽
父组件
<div class="parent">
父组件
<Child>
<div slot="s1">
<p >我是插槽1</p>
<p >我是插槽11</p>
</div>
<p slot="s2"> 我是插槽2 </p>
</Child>
</div>
子组件
<div class="child">
子组件
<slot name="s1" ></slot>
<hr/>
<slot name="s2"></slot>
</div>
效果图
在父组件中用slot标记,在子组件name 标记需要插入的地方。多个元素插入,用div包起来即可。
1.3作用域插槽
父组件
<div class="parent">
父组件
<Child>
<div slot="s1">
<p>我是插槽1</p>
<p >我是插槽11</p>
</div>
<template slot="s2" slot-scope="key" >
<p >{{ key.text }}</p>
</template>
</Child>
</div>
子组件
<div class="child">
子组件
<slot name="s1"></slot>
<hr />
<slot name="s2" text="我是数据传递"></slot>
</div>
vue使用slot-scope来使子组件传递数据给父组件。绑定的key类似将子组件的所有数据汇聚在此,通过key.text来获取数据