IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Vue2学习计划六:组件化 -> 正文阅读

[JavaScript知识库]Vue2学习计划六:组件化

我们面对乱麻的时候,当然是快刀斩。面对复杂问题的时候,我们最佳方案就是将问题进行拆解成一个个小问题,然后一个一个的解决。

这同样适用于编程。如果将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续管理和维护。但如果将一个页面拆分成不同的供可能块,每个功能块都完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得很容易了。

同样在Vue中,也提供了一种抽象思想,让开发者可以开发出一个个独立可复用的小组件来构造开发者的应用,任何应用最终都会可以被抽象成一颗组件树。

一、组件化的基本使用过程

在Vue中,使用组件可以分成三个步骤:

  1. 创建组件构造器,调用Vue.extend()方法创建组件构造器
  2. 注册组件,调用Vue.component()方法注册组件
  3. 使用组件,在Vue实例的作用范围内使用组件

在代码上展示一下:

<div id="app">
  <!-- 3.在Vue实例的作用范围为使用组件-->
  <my-cpn></my-cpn>
</div>
<script src="./../js/vue.js"></script>
<script>
  //1.创建组件构造器,传入的template代表我们自定义组件的模板
  const cpn = Vue.extend({
    template: '<div>' +
        '<h2>我是标题</h2>' +
        '<p>我是内容1</p>' +
        '<p>我是内容2</p>' +
        '</div>'
  })
  
  //2.将组件构造器注册为一个组件,并给该组件起一个组件标签名my-cpn,需要传递两个参数:第一个是祖册组件的标签名,第二个是组件构造器
  Vue.component('my-cpn', cpn)
  const app = new Vue({
    el: '#app'
  })
</script>

运行之后,就可以看到浏览器上显示了template里的内容。

二、全局组件和局部组件

全局和局部的区别也在于作用域范围。全局变量就是在整个程序中都可以使用,局部变量就是只能在一个部分使用。组件也是一样的道理。

那么这个全局组件和局部组件的区别在哪里?其实在于注册部分,如果在某个Vue实例中注册,则为局部组件,如果外Vue实例外面注册就是全局组件,即上一节的注册。全局组件可以在多个Vue实例中使用。

<div id="app">
<my-cpn></my-cpn>
</div>
<script src="./../js/vue.js"></script>
<script>
  const cpn = Vue.extend({
    template: '<div>' +
        '<h2>我是cpn标题</h2>' +
        '<p>我是cpn内容</p>' +
        '<p>我是cpn内容1</p>' +
        '</div>'
  })
  const app = new Vue({
    el: '#app',
    components: { //局部组件注册
      myCpn: cpn
    }
  })
</script>

三、父组件和子组件的区别

组件化的思维就是将一个复杂的问题分解成无数个小问题,那么这个大问题可能就会被分解成无数个父问题和子问题,甚至子、父、爷问题。

那什么是父组件,什么是子组件呢?在Vue里,我的理解是,假设有组件a和b,我在组件a的template中使用了组件b,并且在组件a的Vue实例中注册了b。那么a组件就是b组件的父组件,b组件是a组件的子组件。

那么,下面我们就来实现一下父组件和子组件

<div id="app">
  <cpn-father></cpn-father>
  <cpn-son></cpn-son>
</div>
<script src="./../js/vue.js"></script>
<script>
  const cpnSon = Vue.extend({
    template: '<div>' +
        '<h2>我是子组件的标题</h2>' +
        '<p>我是子组件的内容</p>' +
        '</div>'
  })
  const cpnFather = Vue.extend({
    template: '<div>' +
        '<h2>我是父组件的标题</h2>' +
        '<p>我是父组件的内容</p>' +
        '<cpn-son></cpn-son>' +
        '</div>',
    components: {
      cpnSon: cpnSon
    }
  })
  const app = new Vue({
    el: '#app',
    components: {
      cpnFather: cpnFather,
      cpnSon: cpnSon
    }
  })
</script>

cpnSon组件构造器是在cpnFather组件构造器的里面注册的,所以cpnSon就是cpnFather的子组件。而cpnFather又在app这个Vue实例里注册,是不是同样就是这个全局Vue实例的子组件呢?同样的代码里还验证了cpnSon组件可以在app这个实例里面注册,也可以在cpnFather里面注册,并不会相互影响使用。

代码运行结果:

在这里插入图片描述

四、组件简写和思考

4.1 注册组件的语法糖

我们在使用组件化的时候,需要三步:一是创建组件构造器,二是注册组件构造器,三是使用。有没有办法将一、二步合并?必然是有的,这就是注册组件的语法糖写法,也是实际使用中最常用的方法。

该语法糖写法省去了调用Vue.extend()的不走,直接使用一个对象来替代Vue.extend。同样也区分了局部组件语法糖写法和全局组件语法糖写法。最常用的就是局部组件语法糖,也是代码里最常见的部分,下面直接用代码展示:

<!--1. 全局组件写法-->
<div id="app">
  <cpn-son></cpn-son>
</div>
<script src="./../js/vue.js"></script>
<script>
  Vue.component('cpnSon', {
    template: '<div>' +
        '<h2>我是标题1</h2>' +
        '<p>我是内容,哈哈哈</p>' +
        '</div>'
  })
  const app = new Vue({
    el: '#app'
  })
</script>

<!--2. 局部组件写法-->
<div id="app">
  <cpn-son></cpn-son>
</div>
<script src="./../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    components: {
      cpnSon: {
        template: '<div>' +
            '<h2>我是标题1</h2>' +
            '<p>我是内容1</p>' +
            '</div>'
      }
    }
  })
</script>

局部组件写法是不是经常见到的样子?越来越熟悉了。那么,想问一下朋友们,Vue是响应式的,既然组件里看到了HTML元素,那么绑定的数据放在那里了?

4.2 组件的data为什么是函数

既然封装成一个个组件,那么必然数据是独立的,不然就不便于管理。组件在注册时,可以存放一些自己的data数据,这个data数据是函数型的,返回的实例对象。

Vue.component('cpn', {
	template: '#cpn',
	data(){
		return {
			title: 'abc'
		}
	}
})

那么为什么组件中数据要设计成函数?

因为使用组件化思维之后,一个大组件里有很多小组件,为了使组件能随时拆分和重组,那么每个组件的数据必须都是独立的。

可以试想一下,如果每个子组件的数据都放在一处,那么怎么区别哪个数据是哪个组件的。当我们要拆除组件A时,怎么才能确保干净的去除组件A的所有数据呢?所以只有当组件独立管理自己的数据时,才更方便组件化。

4.3 组件之间数据传输

这是一个值得细细讲的,比如子组件跟父组件传递数据。比如子组件访问父组件,父组件访问子组件。
那么我们下节再见。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-08-24 15:27:49  更:2021-08-24 15:29:42 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 -2024/12/27 5:13:42-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码
数据统计