vue组件 - 概念 - 基础使用 - 局部 - 全局

vue组件_概念

组件是可复用的 Vue 实例, 封装标签, 样式和JS代码

组件化 ：封装的思想，把页面上 可重用的部分 封装为 组件，从而方便项目的 开发 和 维护

一个页面， 可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立的 结构 样式 和 行为(html, css和js)

vue组件_基础使用

目标: 每个组件都是一个独立的个体, 代码里体现为一个独立的.vue文件

口诀: 哪部分标签复用, 就把哪部分封装到组件内

(重要): 组件内template只能有一个根标签

(重要): 组件内data必须是一个函数, 独立作用域

局部 - 注册使用

语法:

import 组件对象 from 'vue文件路径'

export default {
    components: {
        "组件名": 组件对象
    }
}

1. 新建一个组件 （ vue 文件 ），将复用的结构剪切在这里面
2. 在当前vue文件中引入 import 组件名 from 'vue文件路径'
3. 注册组件 components : { " 组件名 " : 组件文件 }
4. 使用组件，像标签一样调用

---

全局 - 注册使用

语法:

import Vue from 'vue'
import 组件对象 from 'vue文件路径'

Vue.component("组件名", 组件对象)

1.新建组件（ vue 文件 ）
2.引入组件 import
3.注册组件 components : { 组件名 ，组件文件 } / vue.compoment ( 组件名 ，组件文件 )
4. 使用组件 ， 像标签一样使用

main.js - 立即演示

// 1.新建组件（ vue 文件）
// 2.引入组件 import
// 3.注册组件 components:{ 组件名 ，组件文件 } / vue.component( 组件名 ，组件文件 )
// 4.使用组件 像标签一样使用
// 全局注册组件
import PennelG from './day04/components/Pennel.vue'
Vue.component('PennelG',PennelG)

        <template>
  <div id="app">
    <h3>案例：折叠面板</h3>
    <!-- 局部组件，在当前文件内导入和注册 -->
    <Pennel></Pennel>
    <Pennel></Pennel>
    <Pennel></Pennel>

    <!-- 使用全局组件 也是这4个步骤，只不过 导入 和 注册 组件的代码写到了 main.js 入口中 -->
    <PennelG></PennelG>
    <PennelG></PennelG>
    <PennelG></PennelG>
  </div>
</template>

<script>
// 1.新建组件  .vue 文件  
// 2.引入组件  import
import Pennel from './components/Pennel.vue'
// 3.注册组件  components : { 组件名 ，组件文件 }
// 4.使用组件  像标签一样调用
export default {
    components: {
        Pennel:Pennel
    }
}
</script>

<style lang="less">
body {
  background-color: #ccc;
  #app {
    width: 400px;
    margin: 20px auto;
    background-color: #fff;
    border: 4px solid blueviolet;
    border-radius: 1em;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
    padding: 1em 2em 2em;
    h3 {
      text-align: center;
    }
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid #ccc;
      padding: 0 1em;
    }
    .title h4 {
      line-height: 2;
      margin: 0;
    }
    .container {
      border: 1px solid #ccc;
      padding: 0 1em;
    }
    .btn {
      /* 鼠标改成手的形状 */
      cursor: pointer;
    }
  }
}
</style>