Vue组件的创建与引用

做前端开发的朋友应该没有不知道组件的，我们开发时所用到的东西，小到按钮，大到表单，甚至是功能齐全的整个页面，只要有被复用的可能，就可以将其封装成一个组件，以便后续的引用。那么初学的朋友肯定很好奇，组件是如何创建的呢，在其他的页面中，又是如何引用的呢，今天我们就来做一个简单的示例演示。

上一次的教程中，我们创建了一个干净的vue实例，项目工程结构如下所示：

image.png

今天的教程就接着它来——

1. 在/src目录下创建一个新文件夹components，用于存储以后可能用到的所有组件，这样可以使后续开发过程更加简洁清晰。并在components文件夹下创建一个linkToHelloWorld.vue文件，用来编写组件的实现代码。

   
   
   

   image.png

2. 仿照 App.vue 的格式，在linkToHelloWorld.vue文件中写组件代码。在本例中，组件其实就是一行字“Hey, It's Vue.js! A great expedition!”

3. 让该组件显示在主页面，需要在App.vue中添加以下代码：

在此有几点需要注意：

• 下面这行代码必须在标签内的第一行，它是对linkToHelloWorld组件在本页面中的引入；

import linkToHelloWorld from './components/linkTo/linkToHelloWorld' 

• linkToHelloWorld.vue文件的地址绝对不能错；
• data代码块后必须加英文逗号，此处的components: { linkToHelloWorld }对linkToHelloWorld组件进行了声明。

4. 在标签内使用linkToHelloWorld组件：

跳转至HelloWorld

此时的主页面如下：

image.png

当然，这只是一个简单的组件，实际项目中的组件往往涉及数据的传输和交互，比较复杂，但原理是相同的，大家不要把它想的太恐怖了。

无论何时，只要记住：创建新组件、写样式、写方法、传数据，然后在其他页面引入、声明和使用这几个步骤就好。只要思路清晰了，执行起来就不会有太大困难。