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中的重要思想

  • 它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
  • 任何的应用都会被抽象成一颗组件树。

vue2组件_第1张图片

组件化思想的应用

  • 有了组件化的思想,我们在之后的开发中就要充分的利用它。
  • 尽可能的将页面拆分成一个个小的、可复用的组件。
  • 这样让我们的代码更加方便组织和管理,并且扩展性也更强

复用组件

  • 组件是可复用的 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 以及 之类的 Vue 内置组件除外。

这样做可以避免跟现有的以及未来的 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模板内容:

  • 使用

你可能感兴趣的:(vue,vue.js,javascript,前端)