插槽
利用插槽,父组件可以向子组件里面注入内容. 注:插槽的视图部分的样式由父组件决定,子组件决定数据.也就是说是子组件给父组件传递数据. 插槽的类型有:
- 单个插槽的使用 父组件:
<Child>
<p>我是插槽</p>
</Child>
子组件:
<slot>
//这里会显示“我是插槽”
</slot>
- 具名插槽的使用 父组件:
<Child>
<p slot="s1">我是插槽1</p>
</Child>
子组件:
<slot name="s1">
//这里会显示“我是插槽1”
</slot>
- 作用域插槽的使用(数据传递) 子组件传递
<slot name="s2" text="我是数据传递"></slot>
//此处传递的是text
父组件展示子组件传来的数据
<p slot-scope="props" slot="s2">
{{ props.text }}
</p>
//此处props可以为其他名字,它只是一个key值
动态组件
<component v-bind:is="currentView"></component>
缓存(keep alive)
- 用法:
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>
- 什么时候情况下使用缓存?
如果需要实时更新,则不设置缓存,否则可以使用缓存.