vue的动态组件及插槽详情

1、 什么是动态组件

动态组件是指:在一个挂载点使用多个组件,并进行动态切换。可能对于新手来说,这句话有些难理解,什么是挂载点?可以简单的理解为页面的一个位置。
最常见的就是:tab的切换功能。

在vue要实现这个功能通常用两种方式。一是使用元素的 is 的特性,二是使用 v-if 

方式一:




 方式二




二、插槽(组件是自定义的)

  1. 好处:组件的内容结构可定制 用slot插槽进行占位

  2. 语法:

子组件中通过slot进行占位

父组件,在子组件标签嵌套的内容就会被渲染到slot地方

3.具体写法

子组件 默认内容

父组件 <子组件标签>

 4、 具名插槽

理解:如果插槽有多个,App.vue中的标签都会给所有带插槽的,要想对应,用具名插槽

子组件:

默认内容

默认内容

默认内容

父组件:





你可能感兴趣的:(vue.js,前端,javascript)