电脑现已成为我们工作、生活和娱乐必不可少的工具了，在使用电脑的过程中，可能会遇到vue.js如何使用组件的问题，如果我们遇到了vue.js如何使用组件的情况，该怎么处理怎么才能解决vue.js如何使用组件带来的困扰呢，对于这样的问题其实我们只需要电脑任意一款代码编辑器（笔者使用sublime）vue.js首先我们打开任意一款代码编辑器，笔者这里使用sublime，如图所示。打开后先新建一个vue test文件夹，然后在里面新建一个HTML文件，命名index1.html，并写入基本的HTML页面元素，在body里面写一个div标签。代码和效果如图所示。然后我们需要下载vue.js的库并通过script标签引入，或者使用在线的链接引入进来，这样就解决了这样的问题，接下来给大家带来vue.js如何使用组件的详细操作步骤。

工具/原料

电脑
任意一款代码编辑器（笔者使用sublime）
vue.js

方法/步骤

首先我们打开任意一款代码编辑器，笔者这里使用sublime，如图所示。打开后先新建一个vue test文件夹，然后在里面新建一个HTML文件，命名index1.html，并写入基本的HTML页面元素，在body里面写一个div标签。代码和效果如图所示。

然后我们需要下载vue.js的库并通过script标签引入，或者使用在线的链接引入进来，如图所示，这里用在线引入的方式。

接下来我们开始写vue.js代码，如图所示，在body的div里面再加一个h1标签，然后写一个script标签，并新建一个vue实例，h1标签的内容为vue实例里面定义的变量content。

这里的实例作为我们的主实例。

有了vue主实例后，我们就可以定义组件了。

如图所示，这里定义了一个全局组件，在index1.html的div中本来只有h1标签，现在调用了名为Itme的全局组件。

看一下效果，在123的下面显示了全局组件（子组件）的模板内容。

再来看一下，如何定义局部组件，把上一步的全局组件修改为局部组件：

如图所示，注意定义局部组件的写法，除了定义外，要在根实例里面写入components属性。

显示效果如图所示，同样显示了局部组件（子组件）的模板内容。

注意事项

点个赞、投个票吧，(#^.^#)

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。