vue-cli组件

概述

组件化开发是指：根据封装的思想，将页面上可重用的UI结构封装成组件，从而方便项目的开发和维护。

vue是一个支持组件化开发的前端框架。

组件的后缀名是.vue

每一个组件都是由三部分组成，分别是

1. template 组件的模板UI结构
2. script 组件的JavaScript行为。一些数据(data)和方法(methods)都定义到script中。
3. style 组件的样式

<template>
    <div class="test_box">
        <h3>这是自定义的组件</h3>
        <h3>{{message}}</h3>
        <button @click="changeText">按钮</button>
    </div>
</template>

<script>
//默认导出，固定代码
export default {
  //注意：组件中的data不能指向对象，必须是一个函数  
  data: function(){
      //:和function是可以省略的，写为data()，注意是个函数。
      //return的{}可以定义数据。
      return {
          message:'hello'
      }
  },
  methods:{
      changeText(){
          //在组件中，this就表示当前组件的实例对象。
          this.message = '你好啊啊'
      }
  }
}
</script>

<style lang='less'>
.test_box {
    background-color: aquamarine;
    h3 {
        color: beige;
    }
}
//加入lang='less'就可以使用less样式
</style>

项目路径在day03中的demo。

组件在被封装好之后，彼此之间是相互独立的，不存在父子关系。

在使用组件的时候，根据彼此的嵌套关系，形成了父子、兄弟关系。

使用组件的步骤

如果要想在APP组件中使用Left组件。

1. 使用APP组件的script中，import语法导入需要的组件。
2. 使用APP组件的script中，export 里面components节点注册组件。
3. 以标签的形式使用刚注册的组件。例如 < Left > < /Left>
   组件可以理解为自定义的标签。

使用components注册的都是私有子组件。如果某个组件频繁用到，则需要在每个父组件中均导入、注册和使用，较为麻烦，所以注册全局组件。

在vue项目的main.js入口文件中，使用Vue.component()方法，可以注册全局组件。

// 导入需要被全局注册的那个组件
import Count from '@/components/Count.vue'

//参数1：字符串格式，表示组件的“注册名称”
//参数2：需要被全局注册的那个组件
Vue.component('MyCount', Count)