vue2组件
文章目录
- 注册组件
-
- 组件的理解
-
- 为什么使用组件
- 组件化
- 组件化思想的应用
- 复用组件
- 注册组件
-
- 创建组件构造器
- 注册组件
- 使用组件
- 全局组件和局部组件
-
- 全局组件
- 局部组件
- 组件的嵌套
- 注册组件的语法糖
- 组件命名
-
- 组件名
- 关于组件标签
- 组件模板的分离写法
- 组件的data必须是一个函数
- 关于VueComponent
- 组件props
-
- props声明
- props属性命名
- 静态 vs. 动态 Prop
- 传递不同的值类型
-
- Number
- Boolean
- Array
- Object
- 使用一个对象绑定多个 prop
- 单向数据流
- 更改对象 / 数组类型的 props
- Prop 校验
- Boolean 类型转换
- 组件的自定义事件
-
- 组件绑定原生DOM事件
- 发射自定义事件 $emit
-
- [Vue2 文档的说法：](https://v2.cn.vuejs.org/v2/guide/components-custom-events.html#%E4%BA%8B%E4%BB%B6%E5%90%8D)
- Vue3文档的说法：
- 总结
- 组件监听自定义事件
-
- v-on监听
- $on监听
- 传递事件参数
- 解除自定义事件监听
- 一次性的自定义事件监听
- 组件之间的通信
-
- 父传子 props
- $emit / v-on
- EventBus
- 消息订阅与发布
- Vuex
- 总结
- 组件上使用v-model指令
-
- v-model的原理
- 组件上的v-model
- 非表单组件的v-model
- v-model使用总结
-
- 原生DOM表单元素自带v-model
- 自定义组件使用v-model，非表单元素
- 自定义表单元素 input 和 textarea
- model属性
- .sync 修饰符
- 组件插槽
-
- 插槽的理解
- 渲染作用域
- 插槽默认内容
- 具名插槽
- 作用域插槽
- 解构作用域插槽
- 具名作用域插槽
- 模仿el-table使用插槽
- 依赖注入
-
- Prop 逐级透传问题
- Provide (提供)
- Inject (注入)
-
- 注入
- 注入别名
- 注入默认值
- 使用 Symbol 作注入名
- 透传 Attributes
-
- Attributes 继承
-
- 对 `class` 和 `style` 的合并
- `v-on` 监听器继承（==vue3语法==）
- 深层组件继承
- 禁用 Attributes 继承
- 多根节点的 Attributes 继承（==vue3语法==）
- 在 JavaScript 中访问透传 Attributes
- DOM 模板解析注意事项
-
- DOM模板
- 大小写区分
- 闭合标签
- 元素位置限制
- 动态组件和KeepAlive
-
- 动态组件
- KeepAlive
-
- 包含/排除
- 最大缓存实例数
- 缓存实例的生命周期
- 异步组件
-
- 使用异步组件
- 处理加载状态
- 组件的循环引用
-
- 递归组件
- 组件之间的循环引用
- 访问组件实例的方法
注册组件
组件的理解
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以：进行数据传递、扩展 HTML 元素、封装可重用的代码。**在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。**所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。
- 组件是实现局部功能效果的代码集合，一个组件可以包含html/css/js/image等资源
为什么使用组件
- 如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。
- 但如果，我们将一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。每一个小的功能块就是一个组件。
组件化
组件是Vue.js中的重要思想
- 它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
- 任何的应用都会被抽象成一颗组件树。
组件化思想的应用
- 有了组件化的思想，我们在之后的开发中就要充分的利用它。
- 尽可能的将页面拆分成一个个小的、可复用的组件。
- 这样让我们的代码更加方便组织和管理，并且扩展性也更强
复用组件
- 组件是可复用的 Vue 实例
- 组件就像标签一样可以重复使用
- 可以将组件进行任意次数的复用
注册组件
注册组件分为三步
- 创建组件构造器
- 注册组件
- 使用组件
<div id="app">
<h1>Apph1>
<Hello>Hello>
div>
<script>
// 第一步：创建组件构造器
const Hello = Vue.extend({
template: `Hello组件`,
});
// 第二步：注册组件
Vue.component('Hello', Hello);
new Vue({
el: '#app',
});
script>
创建组件构造器
使用基础 Vue 构造器 Vue.extend() ，创建一个“子类”。参数是一个包含组件选项的对象。
Vue 看做是父类， Vue.extend 创建一个继承Vue的子类，这个子类使用new关键字可以创建组件对象。
- 调用Vue.extend()创建的是一个组件构造器。
- 通常在创建组件构造器时，传入template代表自定义组件的模板。该模板就是在使用到组件的地方，要显示的HTML代码。
- 事实上，这种写法在Vue2.x的文档中几乎已经看不到了，它会直接使用下面我们会讲到的语法糖，但是在很多资料还是会提到这种方式，而且这种方式是学习后面方式的基础。
Vue.extend(options)创建组件构造器，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
- el不要写：只有const vm = new Vue()创建的Vue实例才有el选项，并且最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
- data必须写成函数： 避免组件被复用时，数据存在引用关系。
注册组件
- 调用Vue.component()是将组件构造器注册为一个组件，并且给它起一个名称作为组件的名字。
- 需要传递两个参数：1、注册组件的名称；2、组件构造器。
使用组件
- 使用自定义组件时，组件必须放在根组件vm实例模板的内部
- 在自定义组件中也可以使用其他的自定义组件
全局组件和局部组件
全局组件
注册全局组件：Vue.component('组件名',组件构造器)
Vue.component('Hello', Hello);
局部组件
注册局部组件：在options选项中添加components属性注册局部组件
new Vue({components:{ 组件名: 组件构造器 }})Vue.extend({components:{ 组件名: 组件构造器 }})
new Vue({
components:{
//Hello:Hello,
// 简化为
Hello，
}
});
// 或者
Vue.extend({
components:{
//Hello:Hello,
// 简化为
Hello，
}
});
不管是全局组件，还是局部组件使用方式都一样，区别是使用范围不一样：
- 局部组件：只能在注册局部组件的vue实例的模板中使用（谁注册，在谁的模板中使用）
- 全局组件：可以在任何一个vue实例的模板中使用，也可以在子组件中使用（在任意组件的模板中使用）
组件的嵌套
- 组件和组件之间存在嵌套关系，组件之间的嵌套就形成了父子组件、兄弟组件的关系
- 父子组件不局限于全局组件或者局部组件，类似HTML标签，把组件用在哪个组件的内部，外部组件是父组件，内部组件是子组件。
- 如果两个组件是并列关系组件，则是是兄弟组件
组件嵌套的时候注意组件注册的位置：
- 局部组件谁注册，在谁的模板中使用。
- 全局组件在任意组件的模板中使用。
注册组件的语法糖
使用Vue.extend()创建组件构造器，然后再进行注册的方式有些繁琐。Vue为了简化这个过程，提供了注册的语法糖。省去了调用Vue.extend()的步骤，而是可以直接使用一个对象来代替Vue.extend()。
<div id="app">
<h1>Apph1>
<Hello>Hello>
<World>World>
div>
<script>
// 第一步：创建组件配置对象
const Hello = {
name:'Hello',
template: `Hello组件`,
};
const World = {
name:'World',
template: `World组件`,
}
// 第二步：注册组件
// 注册全局组件
Vue.component('Hello', Hello);
new Vue({
el: '#app',
// 注册局部组件
components:{
World,
}
});
script>
组件命名
组件名
一个单词组成：
- 第一种写法(首字母小写)：Vue.component(‘hello’, { });
- 第二种写法(首字母大写)：Vue.component(‘Hello’, { });
多个单词组成：
- 第一种写法(kebab-case命名)：Vue.component(‘hello-world’, { });
- 第二种写法(CamelCase命名)：Vue.component(‘HelloWorld’, { }); (需要在单文件组件中使用)
组件名的推荐命名为多个单词：
组件名应该始终是多个单词的，根组件 App 以及
这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。
- 组件名不能与HTML中已有的元素名称冲突，例如：h2、H2都不行。
- 给组件命名之后，可以在options中使用name配置项指定组件在开发者工具中呈现的名字。
关于组件标签
第一种写法（带有闭合的组件）：
第二种写法（自闭合组件）：
在单文件组件的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。
自闭合组件表示它们不仅没有内容，而且刻意没有内容。其不同之处就好像书上的一页白纸对比贴有“本页有意留白”标签的白纸。而且没有了额外的闭合标签，你的代码也更简洁。
不幸的是，HTML 并不支持自闭合的自定义元素——只有官方的“空”元素（br、hr、img等元素）。所以自闭合写法适合单文件组件中，在DOM模板中不要使用。
总结：
-
不用单文件组件时，
-
不用单文件组件时，由于 HTML 是大小写不敏感的，在 DOM 模板中必须仍使用 kebab-case。
-
在单文件组件中推荐使用自闭合的组件
<HelloWorld/>
<hello-world>hello-world>
<hello-world>hello-world>
组件模板的分离写法
组件模板的标签直接写在template属性中比较麻烦。如果我们能将其中的HTML分离出来写，然后挂载到对应的组件上，必然结构会变得非常清晰。
Vue提供了两种方案来定义HTML模板内容:
- 使用