vue组件——基本使用

声明周期

在前边文章的例子中，每次都使用 new Vue() 创建了一个新的实例，每个实例在初始化时，都需要经过一系列的过程，我们可以在这个过程中，添加自己的逻辑。

常用声明周期:

1. created()/mounted()： 发送 ajax 请求
2. beforeDestory()

组件定义和使用

在我们使用 vue-cli 创建的项目中，每个 .vue 文件都是一个组件，组件的同样保持着上边的声明周期。

组件的组成

1. 模板页面

   <template>
     <div>
       ....
     </div>
   </template>
   

   注： 模板中的 HTML 只能有一个根元素，

   // 反例
   <template>
     <div>
       ....
     </div>
     <div>
       ....
     </div>
   </template>
   

2. JS 模板对象

   <script>
   export default {
     name: 'HelloWorld',
     data () {
       return {
         msg: 'Welcome to Your Vue.js App'
       }
     }
   }
   </script>
   

   在组件中，data 必须是一个函数，每个实例可以单独维护一份；如果还是写成一个对象，会影响到其他用到此组件的地方。

3. 样式

   <style scoped>
   h1, h2 {
     font-weight: normal;
   }
   </style>
   

   scoped 的作用，表示样式的作用域，只在当前组件中生效

基本使用

<template>
    <div>
      <h1>HOME</h1>
        // 使用组件
      <hello-world></hello-world>
    </div>
</template>

<script>
    // 引入组件
    import HelloWorld from './HelloWorld'

    export default {
        name: "Home",
        // 声明组件
        components: {
            HelloWorld
        }
    }
</script>

  上边的使用方式是局部注册，每次都需要引入和声明；Vue 还支持注册全局组件，在 main.js 中引入之后，注册到 Vue 中，其他组件中，就可以不用引入，直接使用了：

import HelloWorld from '@/components/HelloWorld'

Vue.component('HelloWorld' ,HelloWorld)

<template>
    <div>
      <h1>HOME</h1>
      <hello-world></hello-world>
    </div>
</template>

<script>
    export default {
        name: "Home",
    }
</script>

  组件标签的写法，可以和组件名称相同；也可以将组件名称大写变成小写，用 - 连接；Vue 推荐使用后边一种方式；因为，组件名称可能会和 HTML 元素名称同名。

  另外，Vue 还支持基础组件的自动注册，主要原理就是，自动加载指定文件夹下的组件，可以参考官方网站的例子，组件注册