Vue组件化编程

最新推荐文章于 2026-01-06 22:21:01 发布

原创最新推荐文章于 2026-01-06 22:21:01 发布 · 114 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

零基础学Vue（废弃）专栏收录该内容

2 篇文章

订阅专栏

零基础学习 Vue 笔记

组件

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

在这里插入图片描述

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

Vue 中的组件：

在这里插入图片描述

非单文件组件

组件使用步骤

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

使用 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脚手架支持）

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

组件标签

第一种写法：<school></school>
第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

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