前端笔记【Vue】组件化开发

一、介绍

Vue是一个支持组件化开发的前端框架。Vue中规定，组件的后缀名是.vue（eg.App.Vue文件就是一个Vue组件）。

二、组件的组成

每个Vue组件都由三部分构成，分别是：template、script、style。其中，每个组件必须包含template模板结构，而script行为和style样式是可选的组成部分。

1.template

定义：（Vue规定）每个组件对应的模板结构，需要定义到<template>节点中

<template>
   <!-- 当前组件的DOM结构，需要定义到template标签内部  -->
</template>

注意：

(1) template只是Vue提供的容器标签，只起到包裹性质的作用，他不会真正的渲染到DOM元素；

(2) template只能包含唯一根节点

2.script

定义：（Vue规定）开发者可以在<script>节点中封装组件的JavaScript业务逻辑。<script>节点的基本结构如下：

<script>
  //今后，组件相关的data数据、method方法等；
  //都需要定义到export default所导出的对象中
  
  export default{

  }

</script>

注意：

vue规定：vue组件中的data必须是一个函数，不能直接指向一个数据对象

3.style

定义：（Vue规定）组件内的style节点可选的，开发者可以在<style>节点中编写样式美化当前组件的ui结构

<style>

  h1{
    font-weight:normal
  }

</style>

注意：

在<style>标签上添加lang="less"属性，即可使用less语法编写组件样式

三、组件间的父子关系

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

只有在使用时，根据彼此的嵌套关系，形成了父子关系、兄弟关系

四、使用组件的三个步骤

步骤1：使用import语法导入所需要的组件

import Subassembly from '@/components/subassembly.vue'

步骤2：使用components节点注册组件

export default{
  components:{
     Subassembly 
  }
}

步骤3：以标签形式使用刚才注册的组件

<div class="box">

   <Subassembly></Subassembly>

</div>

五、组件的注册

注册私有子组件：通过components

<script>
 import Subassembly from '@/components/Subassembly.vue'
 import Subassembly2 from '@/components/Subassembly2.vue'
 import Subassembly3 from '@/components/Subassembly3.vue'

 export default{
   components:{

      Subassembly,
      Subassembly2,
      Subassembly3,

   }
 }



</script>

注册全局组件：在main.js入口文件中，通过Vue.component()方法，注册全局组件

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

Vue.components('MyCount',Count)

前端笔记【Vue】组件化开发

猜你喜欢