vuejs学习总结（六）——组件化

最新推荐文章于 2022-08-07 01:00:36 发布

VIP文章原来是小柒

最新推荐文章于 2022-08-07 01:00:36 发布

阅读量223

点赞数

分类专栏：前端学习文章标签： vue.js

本文链接：https://blog.csdn.net/qq_42711899/article/details/105614289

版权

这里写自定义目录标题

组件化开发

组件化开发

概述

我们人类在面对复杂问题的处理方法：
任何一个人处理信息的逻辑能力都是有限的，
所以，当面对一个非常复杂的问题时，我们不可能一次性搞定一大堆内容
但是，我们人类有一种能力，就是将问题进行拆分，如果我们将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放入整体中，我们会发现大的问题也可以迎刃而解。
同理，组件化也是类似的思想：

如果我们将一个复杂问题中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理和扩展。
但是，如果我们将一个页面拆分为一个小小的功能模块，每个功能模块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得十分的容易。

vue组件化思想

组件化是vuejs中的重要思想：

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

组件化思想的应用：

我们在引用的过程中要尽可能的将页面拆分为一个个小的，可复用的组件
这样有利于我们的代码更加方便组织和管理，并且扩展性强

注册组件的基本步骤

组件使用分为三个步骤：

创建组件构造器
注册组件
使用组件
具体实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  //3.使用组件
  <my-cpn></my-cpn>
</div>
<script src="../js/vue.js"></script>
<script>
  //ES6:

  //1.创建组件构造器对象
   const cpnC = Vue.extend({
   
     template: `
     <div>
     <h2>我是标题</h2>
     <p>我是内容111111111</p>
     <p>我是内容222222222</p>
</div>
     `
   })
  //2.注册组件
  Vue.component('my-cpn',cpnC)
    const app = new Vue({
   
        el: '#app',
        data: {
   
            message: '你好呀'
        }
    })
</script>

</body>
</html>

下面，让我们来具体的了解下这些步骤代表的具体含义：
1.vue.extend（）

调用vue.extend（）创建一个组件构造器
通常在创建组件构造器时，传入template代表我们自定义组件的模板
该模板就是在使用到组件的地方，要显示的HTML代码
事实上，这种写法在vue2.x的文档中已经看不到了，它直接会使用它所具有的语法糖
件
2.vue.component()
调用vue.component()*是将刚才的组件构造器构造为一个组件，并且给它注册组件的标签名称
所以需要传递两个参数：1，注册组件的标签名；2.组件构造器
3.组件必须挂载在某个vue实例下，否则它不会生效

全局组件和局部组

当我们通过调用Vue.component()注册组件时，组件的注册时全局的
这意味着该组件可以再任意Vue实例下使用
如果我们注册的组件时挂载在某个实例下的，那么就是一个局部组件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn><

最低0.47元/天解锁文章

原来是小柒

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vuejs学习总结（六）——组件化

这里写自定义目录标题组件化开发概述vue组件化思想注册组件的基本步骤组件化开发概述我们人类在面对复杂问题的处理方法：任何一个人处理信息的逻辑能力都是有限的，所以，当面对一个非常复杂的问题时，我们不他可能一次性搞定一大堆内容但是，我们人类有一种能力，就是将问题进行拆分，如果我们将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放入整体中，我们会发现大的问题也可以迎刃而解。同理，组件...
复制链接

扫一扫