Vue 组件的创建、使用

Vue 组件 （ Vue component）

Vue 组件的位置

在 Vue 项目中可以看到一类新的文件后缀 .vue 用来表示 Vue 文件。

需要区分在项目目录 src 下的 App.vue 和 src\components 的文件。在认识 Vue project中提到 App.vue 是用来整合各个组件的主文件，其在单页面应用中体现明显；

而 src\components 下的文件就是 Vue 中的组件，使用可复用的组件来简化应用结构。

Vue 组件的创建

在 src\components 目录下，新建文件，输入组件名称后跟 .vue 后缀即可。（关于组件命名可参考 Vue 官网的风格指南）

创建后的 Vue 组件同样可以从 template-script-style 三个维度来定义内容，同样的内容通过适当的传参就可以实现不同场景下的应用。

Vue 组件的使用

暴露接口

组件的复用体现在可以根据传入的参数而进行不同内容的展示。

当然可以定义固定组件，即不需要参数、在任何使用场景下保持同一状态，但这不能体现组件复用的灵活性，因此参数的设置就显得非常必要，而参数的定义体现在暴露给父组件的接口中。

// showMessage.vue
<template>
    <p>{{ msg }}</p>
</template>
 
<script>
export default {
  props: {
    msg: {
      type: String,
      required: true
    }
  }
}
</script>
 
<style>
 
</style>

以上代码定义了一个用于展示信息的简单组件，通过该组件来演示组件和调用其的父组件之间如何传递参数。

• <template> 标签中使用了模板插值，即通过更改 {{}} 中变量的值来改变渲染内容
• <script>中 export default 即在项目中默认暴露该组件，使得需要使用该组件的父组件能够导入
  同时 props 对象规定了传递的参数及其对应属性（如参数类型、是否必须）
• <style>定义组件样式。其中标签内部的 scoped 决定样式是否只应用于该组件

导入组件

来到需要导入 showMessage.vue 的父组件，如将 Home.vue 作为父组件，然后将 showMessage.vue 导入

// Home.vue
<template>
  <div class="home">
    <showMessage msg="Hello World"/>
  </div>
</template>
 
<script>
// @ is an alias to /src
import showMessage from '@/components/showMessage.vue'
 
export default {
  name: 'Home',
  components: {
    showMessage
  }
}
</script>

• 导入组件的操作在 <script> 中通过 import 关键字实现，from 后为组件所在的路径。
• 在 export default 中注册组件，注册后才可以在 <template> 中应用。
• 使用组件的方式类似书写标签，一般以自闭合标签的形式存在，如<componentName />
• 在标签内进行参数的传递，通过调用 showMessage.vue 同时传入 msg="Hellow World" 使得在将 Home.vue 与 index.html 文件链接后页面中出现内容为 “Hello World” 的 <p> 标签。

以上操作需要在项目编译运行的情况下尝试，也可在过程中通过页面自动刷新来观察修改项目文件对页面内容的影响。