C++ 全栈知识体系C++ 全栈知识体系
✿导航
  • 基础
  • 函数
  • 知识点
  • IO框架
  • 新版本特性
  • 数据库原理
  • SQL语言
  • SQL - MySQL
  • NoSQL - Redis
  • NoSQL - ElasticSearch
  • 算法基础
  • 常见算法
  • 领域算法
  • 分布式算法
  • 数据结构与算法
  • 计算机网络
  • 操作系统
  • 计算机组成
  • 开发
  • 测试
  • 架构基础
  • 分布式系统
  • 微服务
  • 中间件
  • 概念
  • 理论
  • 架构设计原则
  • 设计模式
  • 协议
  • 技术选型
  • 编码规范
  • 流水线构建 - CI/CD
  • 知识点 - Linux
  • 网站 - Nginx
  • 容器化 - Docker
  • 容器编排 - Kubernetes
  • 服务网格 - Service Mesh Istio
  • 常用快捷键 - Shortcut
  • 工具使用 - Tools
  • 开源项目
  • 学习项目
  • 个人项目
  • 项目开发
  • 项目Idea
  • 并发
  • 部署
  • 分布式
  • 知识
  • 问题
  • 编程语言与技术
  • 系统与架构
  • 软件开发实践
  • 数据处理与应用设计
  • 个人
  • 产品
  • 团队
  • 知识体系
  • Vue
关于
✿导航
  • 基础
  • 函数
  • 知识点
  • IO框架
  • 新版本特性
  • 数据库原理
  • SQL语言
  • SQL - MySQL
  • NoSQL - Redis
  • NoSQL - ElasticSearch
  • 算法基础
  • 常见算法
  • 领域算法
  • 分布式算法
  • 数据结构与算法
  • 计算机网络
  • 操作系统
  • 计算机组成
  • 开发
  • 测试
  • 架构基础
  • 分布式系统
  • 微服务
  • 中间件
  • 概念
  • 理论
  • 架构设计原则
  • 设计模式
  • 协议
  • 技术选型
  • 编码规范
  • 流水线构建 - CI/CD
  • 知识点 - Linux
  • 网站 - Nginx
  • 容器化 - Docker
  • 容器编排 - Kubernetes
  • 服务网格 - Service Mesh Istio
  • 常用快捷键 - Shortcut
  • 工具使用 - Tools
  • 开源项目
  • 学习项目
  • 个人项目
  • 项目开发
  • 项目Idea
  • 并发
  • 部署
  • 分布式
  • 知识
  • 问题
  • 编程语言与技术
  • 系统与架构
  • 软件开发实践
  • 数据处理与应用设计
  • 个人
  • 产品
  • 团队
  • 知识体系
  • Vue
关于
  • 知识体系

    • 知识体系 - 入门
    • 知识体系 - CSS
    • 知识体系 - JavaScript
    • 知识体系 - 工程化
    • 知识体系 - 优化
    • 知识体系 - 测试
    • 知识体系 - 构建部署
    • 知识体系 - 资源
  • Vue2

    • Vue基础

      • Vue基础 - 简介
      • Vue基础 - 入门
      • Vue基础 - 模板语法
      • Vue基础 - 数据绑定
      • Vue基础 - MVVM模型
      • Vue基础 - 事件处理
      • Vue基础 - 计算属性
      • Vue基础 - 监视属性
      • Vue基础 - 绑定样式
      • Vue基础 - 条件渲染
      • Vue基础 - 列表渲染
      • Vue基础 - 过滤器
      • Vue基础 - 内置指令
      • Vue基础 - 自定义指令
      • Vue基础 - 生命周期
    • Vue组件

      • Vue组件 - 基础
      • Vue组件 - 非单文件组件
      • Vue组件 - 单文件组件
    • Vue脚手架

      • Vue脚手架 - 基础使用
      • Vue脚手架 - ref和props
      • Vue脚手架 - 混入
      • Vue脚手架 - 插件
      • Vue脚手架 - todoList案例
      • Vue脚手架 - 自定义事件
      • Vue脚手架 - 全局事件总线
      • Vue脚手架 - 消息订阅与发布(pubsub)
      • Vue脚手架 - Vue封装的过渡和动画
    • Vue中的Ajax

      • Vue中的Ajax - 基础
      • Vue中的Ajax - slot插槽
      • Vue中的Ajax - github案例学习
    • Vuex

      • Vuex - 基础
      • Vuex - 使用
    • Vue Router

      • Vue Router - 基础
      • Vue Router - 使用
      • Vue Router - 多级路由(嵌套路由)
      • Vue Router - 路由传参
      • Vue Router - 编程式路由导航
      • Vue Router - 缓存组件
      • Vue Router - 生命周期钩子
      • Vue Router - 导航守卫
      • Vue Router - 工作模式
  • Vue3

    • Vue3 - 快速上手
    • Vue3 - 创建Vue3.0工程
    • Vue3 - 常用 Composition API
    • Vue3 - 响应式原理对比
    • Vue3 - 生命周期对比
    • Vue3 - 其它 Composition API
    • Vue3 - 新的组件
    • Vue3 - 导航守卫
    • Vue3 - 其他

Vue组件 - 非单文件组件

内容

基本使用

  1. Vue中使用组件的三大步骤

    1. 定义组件(创建组件)
    2. 注册组件
    3. 使用组件(写组件标签)
  2. 定义组件

    1. 使用Vue.extend(options)创建,其中options和new Vue(options)时传入的options几乎一样
    2. 区别:
      1. 不写el => 最终所有的组件都要经过一个vm的管理,由vm中的el决定
      2. 函数式data => 避免组件被复用时,数据存在引用关系
    3. 备注
      1. 使用template可以配置组件结构
  3. 注册组件

    1. 局部注册:靠new Vue()的时候传入components选项
    2. 全局注册:靠Vue.component('组件名',组件)
  4. 编写组件标签

    1. <组件名></组件名>
  5. 代码示例

<<< @/md/vue/code/vue_basic/18_非单文件组件/1.基本使用.html

注意事项

  1. 关于组件名:

    1. 一个单词组成

      1. 第一种写法(首字母小写):school
      2. 第二种写法(首字母大写):School
    2. 多个单词组成:

      1. 第一种写法(kebab-case命名):my-school
      2. 第二种写法(CamelCase命名):MySchool (需要Vue脚手架支持)
    3. 备注:

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

    1. 第一种写法:
    2. 第二种写法:
    3. 备注:不用使用脚手架时,会导致后续组件不能渲染。
  3. 一个简写方式

    1. const school = Vue.extend(options) => const school = options
  4. 代码示例

<<< @/md/vue/code/vue_basic/18_非单文件组件/2.几个注意点.html

组件的嵌套

  1. 代码示例

<<< @/md/vue/code/vue_basic/18_非单文件组件/3.组件的嵌套.html

  1. 嵌套示意图

VueComponent

  1. 组件的本质是一个名为VueComponent的构造函数,不是由程序员定义,是Vue.extend生成的

  2. 编写组件标签时,Vue解析时会帮我们创建组件的实例对象,即Vue帮我们执行的:new VueComponent(options)

  3. 特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponent

    Vue.extend = function (extendOptions) {
              /*………………*/
              var Sub = function VueComponent(options) {
                  this._init(options);
              };
              /*………………*/
              return Sub;
          };
    
  4. 关于this指向

    1. 组件配置中

      data函数、methods中的函数、watch中的函数、computed中的函数,它们的this均是【VueComponent实例对象】

    2. new Vue(options)配置中

      data函数、methods中的函数、watch中的函数、computed中的函数,它们的this均是【Vue实例对象】

  5. VueComponent的实例对象,以后简称vc(也可称之为:组件实例对象)

    Vue的实例对象,以后简称vm

  6. 代码示例

<<< @/md/vue/code/vue_basic/18_非单文件组件/4.VueComponent.html

一个重要的内置关系

  1. VueComponent.prototype.__proto__ === Vue.prototype
  2. 作用 => 让组件实例对象能够访问到Vue原型上的属性、方法
  3. 分析示意图

Last Updated:
Contributors: klc407073648
Prev
Vue组件 - 基础
Next
Vue组件 - 单文件组件