Vue组件化编程

零基础学习 Vue 笔记

组件

理解：用来实现局部功能效果的代码集合（ html / css / js / image……）

作用：复用编码, 简化项目编码, 提高运行效率

Vue 中的组件：

非单文件组件

组件使用步骤

1. 定义组件（创建组件）
2. 注册组件
   1. 局部注册：通过 new Vue 的时候传入 components 选项
   2. 全局注册：通过 Vue.component('组件名',组件)
3. 使用组件（写组件标签）

使用 Vue.extend(options) 创建组件时，其中 options 和 new Vue(options) 时传入的那个 options 几乎一样，但也有点区别：

• el 不要写，为什么。 --> 最终所有的组件都要经过一个 vm 的管理，由 vm 中的 el 决定服务哪个容器
• data 必须写成函数。–> 避免组件被复用时，数据存在引用关系。

通过 template 配置组件结构

示例代码如下：

// 创建 school 组件
const school = Vue.extend({
   template:`
   <div>
   <h1>校花，{{schoolName}}</h1>
   </div>
   `,
   data(){
      return {
         schoolName:'北大青鸟',
         address:'北京'
      }
   },
})
//创建 vm
new Vue({
    el:'#root',
    data:{
        hello:'world'
    },
    //局部注册
    components:{
        school
    }
})
// 使用组件
<div id="root">
    <school></school>
    <h1>{{hello}}</h1>
</div>

注意点

组件名

• 一个单词组成：
  • 第一种写法（首字母小写）：school
  • 第二种写法（首字母大写）：School
• 多个单词组成：
  • 第一种写法（kebab-case 命名）：my-school
  • 第二种写法（CamelCase 命名）：MySchool （需要Vue脚手架支持）

1. 组件名尽可能回避 HTML 中已有的元素名称，例如：h2、H2都不行
2. 可以使用 name 配置项指定组件在开发者工具中呈现的名字

组件标签

1. 第一种写法：<school></school>
2. 第2种写法：<school/>

不使用脚手架时，<school/> 会导致后续组件不能渲染

简写创建组件

const school = Vue.extend(options) 可简写为 const school = options，通过 new Vue 的 components 指定

组件嵌套

• 在定义组件时配置 components 注册组件
• 定义一个 App 组件管理所有组件（一人（vm）之下，万人（其他组件）之上）
• 容器中什么都不用写

示例代码如下：

//定义student组件
const student = Vue.extend({
   name:'student',
   template:`
      <div>
         <h2>学生姓名：{{name}}</h2> 
         <h2>学生年龄：{{age}}</h2>  
      </div>
   `,
   data(){
      return {
         name:'校花',
         age:18
      }
   }
})

//定义school组件
const school = Vue.extend({
   name:'school',
   template:`
      <div>
         <h2>学校名称：{{name}}</h2> 
         <h2>学校地址：{{address}}</h2>  
         <student></student>
      </div>
   `,
   data(){
      return {
         name:'北大青鸟',
         address:'北京'
      }
   },
   //注册组件
   components:{
      student
   }
})

//定义hello组件
const hello = Vue.extend({
   template:`<h1>{{msg}}</h1>`,
   data(){
      return {
         msg:'hello！'
      }
   }
})

//定义app组件
const app = Vue.extend({
   template:`
      <div>  
         <hello></hello>
         <school></school>
      </div>
   `,
   components:{
      school,
      hello
   }
})
//创建vm
new Vue({
   template:'<app></app>',
   el:'#root',
   //注册组件
   components:{app}
})
//容器
<div id="root">
</div>

VueComponent

1. school 组件本质是一个名为 VueComponent 的构造函数，且不是程序员定义的，是 Vue.extend 生成的（还未 new）
2. 我们只需要写 <school/> 或 <school></school> ，Vue 解析时会帮我们创建 school 组件的实例对象，即 Vue 帮我们执行 new VueComponent(options)
3. 每次调用 Vue.extend （可简写），返回的都是一个全新的 VueComponent，即写两次 <school></school> 就会执行两次 new VueComponent(options)
4. 关于 this 指向：
   • Vue.extend 组件配置中：data 函数、methods 中的函数、watch 中的函数、computed 中的函数 它们的 this 均是 VueComponent 实例对象
   • new Vue(options) 配置中：data 函数、methods 中的函数、watch中的函数、computed 中的函数 它们的 this 均是 Vue 实例对象
5. VueComponent 的实例对象，之后简称 vc（也可称之为：组件实例对象）

内置关系

一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype，意思是 VueComponent 的原型链指向 Vue 的原型，prototype 是在构造函数上的，而 __proto__ 是在对象上的

作用：让组件实例对象（vc）可以访问到 Vue 原型上的属性、方法

单文件组件

非单文件组件的缺点：样式不能跟着组件走

单文件组件（.vue）的结构：

1. <template></template>：页面模板
2. <script></script>：组件交互相互代码
3. <style></style> ：样式