一、基本用法

在使用vue-cli创建的项目中，组件的创建非常方便，只需新建一个。vue文件，然后在模板中编写HTML代码，一个简单的组件就完成了

一个完整的组件，除了模板，还有脚本和样式

需要注意的是，脚本中的数据必须是函数

然后在js中引入并注册其他文件，就可以直接使用这个组件了

第二，使用插槽分发内容

在开发过程中，经常需要向子组件添加新的内容，因此可以在子组件中保留一个或多个套接字槽

然后在调用该子组件时添加内容

添加的内容将被分发到相应的槽

Slot还可以用作在子组件中定义变量的范围，然后在父组件中自定义呈现方法

在本例中，slot首先被添加到子组件中，数组变量nav在子组件中定义。

然后用范围模板在父组件中添加内容，其中范围是一个固有元素，其值对应于一个临时变量props

道具将接收子组件中的所有绑定属性(如文本)

第三，动态组件

Vue还可以在同一个位置挂载多个子组件，通过变量切换组件，达到tab菜单的效果

这个功能可以通过路由vue-router来实现，但是路由更适合较大的组件，url也会相应改变

Vue本身预留的组件元素可以将组件动态绑定到is特性，方便实现动态组件切换

在上面的例子中，当tabView的值改变时，component将呈现相应的组件，这与路由的效果非常相似，但是地址栏没有改变

但是，每次切换组件时，它们都将被重新呈现，并且组件上的数据无法保留。此时，您可以使用keep-alive将组件保留在内存中，并避免重新呈现

第四，递归组件

当组件具有name属性时，它可以在其模板中递归调用自己，这在开发树组件时非常有效

上面是一个子组件，把名字定义为simple03，然后在模板中调用自己，用v-for实现递归。

为了防止无限循环，在调用自身时添加了v-if作为判断条件

当调用父组件时，您需要通过道具传递一个树：

最终渲染结果：

摘要

以上就是本文的全部内容。希望本文的内容能给你的学习或工作带来一些帮助。有问题可以留言交流。谢谢你的支持。