Vue组件的创建与引用

2019-05-22 本文已影响28人 _____请输入昵称

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

上一次的教程中，我们创建了一个干净的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

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

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

Vue组件的创建与引用

猜你喜欢

热点阅读