Vue组件使用教程详解

官方网站：https://cn.vuejs.org/v2/guide/components.html

1.引言1。Vue组件

组件是Vue.js最强大的功能之一组件可以扩展HTML元素，封装可重用的代码。在更高的层次上，组件是一个自定义元素，Vue.js的编译器为其添加了特殊的功能。

所有Vue组件也是Vue的实例，因此它们可以接受相同的选项对象(除了一些根级别的特定选项)并提供相同的生命周期挂钩。

2.使用组件

对于自定义标签的命名，Vue.js并不强制遵循W3C规则(小写，包含一个短横条)

注册组件后，它可以用作实例模板中的自定义元素。

注意：在初始化根实例之前注册组件

注册组件时，必须首先编写所需的组件(相当于一个页面，包括js操作、css样式等。)，例如：

创建新的头部组件

上面的header组件只有一句话，放在H标签里。使用时，需要先导出组件，即(导出默认块)，这样就可以使用import在需要的地方导入组件。

导出和导出默认值之间的差异：

两者都是出口的

区别在于：

导出后，需要从接收位置导入{变量名}

这里，我在js文件中导出一个数据方法，然后在vue文件(组件)中使用它

输出分量

在你需要的地方使用它

导出默认值后，收到的本地导入变量名来自“location”

注意：/表示当前位置

输出分量

在需要的地方导入

接下来，开始使用组件：

使用组件时，您需要首先创建一个Vue实例，然后选择需要放置组件的元素，然后注册组件并将其放在选定的位置

完成以上步骤，在页面上显示组件

该页面显示结果图

摘要