做前端开发的朋友应该没有不知道组件的，我们开发时所用到的东西，小到按钮，大到表单，甚至是功能齐全的整个页面，只要有被复用的可能，就可以将其封装成一个组件，以便后续的引用。那么初学的朋友肯定很好奇，组件是如何创建的呢，在其他的页面中，又是如何引用的呢，今天我们就来做一个简单的示例演示。
上一次的教程中，我们创建了一个干净的vue实例，项目工程结构如下所示：
image.png
今天的教程就接着它来——
-
在/src目录下创建一个新文件夹components，用于存储以后可能用到的所有组件，这样可以使后续开发过程更加简洁清晰。并在components文件夹下创建一个linkToHelloWorld.vue文件，用来编写组件的实现代码。
image.png
-
仿照 App.vue 的格式，在linkToHelloWorld.vue文件中写组件代码。在本例中，组件其实就是一行字“Hey, It's Vue.js! A great expedition!”
<template>
<div id="vue">Hey, It's Vue! {{ message }}</div>
</template>
<script type="text/javascript">
export default {
//这里需要将模块引出，可在其他地方使用
name: "linkToHelloWorld",
data (){
//注意：data即使不需要传数据，也必须return,否则会报错
return {
message: "A great expedition!"
}
}
}
</script>
<style type="text/css">
#vue{
color: green;
font-size: 32px;
}
</style>
- 让该组件显示在主页面，需要在App.vue中添加以下代码：
<script>
import linkToHelloWorld from './components/linkTo/linkToHelloWorld'
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
components: { linkToHelloWorld }
}
</script>
在此有几点需要注意：
- 下面这行代码必须在<script></script>标签内的第一行，它是对linkToHelloWorld组件在本页面中的引入；
import linkToHelloWorld from './components/linkTo/linkToHelloWorld'
- linkToHelloWorld.vue文件的地址绝对不能错；
- data代码块后必须加英文逗号，此处的components: { linkToHelloWorld }对linkToHelloWorld组件进行了声明。
- 在<template></template>标签内使用linkToHelloWorld组件：
<linkToHelloWorld to="linkTo">跳转至HelloWorld</linkToHelloWorld>
此时的主页面如下：
image.png
当然，这只是一个简单的组件，实际项目中的组件往往涉及数据的传输和交互，比较复杂，但原理是相同的，大家不要把它想的太恐怖了。
无论何时，只要记住：创建新组件、写样式、写方法、传数据，然后在其他页面引入、声明和使用这几个步骤就好。只要思路清晰了，执行起来就不会有太大困难。
网友评论