Vue 组件

目录-入口-由此开始-大纲-总览-概括-枢纽-指导-指引-总领

组件的概念:

1. Vue中, 组件间可以有联系, 且为树状关系
   1. 其中根组件也被称为应用
2. 组件实例中有Vue内置的一些特殊方法
3. 组件最核心的数据其实是html标签数据
   1. 即组件主要用来打包封装一堆html标签

1. 组件树关系图:

1. 对所有组件而言, 只能调用亲子组件和全局组件
   1. 不能调用孙子组件

2. 组件内部的内容(功能逻辑, 变量, 事件等…):

安排方式

child::Vue 组件内容的安排方式

定义组件的状态

child::vue 组件状态

定义带逻辑的状态接口

child::Vue computed

定义组件中的逻辑

• child::组件方法
• child::Vue watch
• 使用内部内容:调用内置API

定义组件的页面结构

child::Vue 组件模板

声明子组件

child::声明子组件

组件间的数据传递

child::Vue 组件之间传递数据

组件生命周期钩子 hook函数

child::Vue 组件周期钩子函数

特殊的组件:

1. 根组件为应用
2. 根组件的所有子组件都为全局组件
3. 组件中不含自己的html标签数据, 称为非渲染组件

使用组件:

1. child::声明组件
2. child::使用组件模板
3. child::Vue 组件之间传递数据
4. child::处理组件多余的属性
5. child::Vue 监听后代组件内事件
6. child::组件对外实现V-model
7. child::给组件传入innerHTML
8. child::动态组件
9. child::给组件传入class

组件实例中的内置方法:

1. 梗概:

1. 大多数方法都会返回调用该方法的组件实例本身
   1. 所以支持链式调用
2. 但mount()方法只会返回根组件实例

2. mount()方法:

child::Vue mount方法

3. component()方法:

child::Vue component()方法