Vue.js—组件化

最新推荐文章于 2021-09-08 22:54:49 发布
最新推荐文章于 2021-09-08 22:54:49 发布
阅读量334 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44768794/article/details/115265305
版权

组件化

组件化的实现和使用步骤

组件化：
如果我们将一个页面所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利用后续的管理以及扩展
但如果我们将整个页面拆分为一个个小的功能块，每个功能块完成属于自己这部分的功能，那么之后整个页面的管理和维护就简易多了

组件化是是Vue.js的重要思想：
□ 它提供了一种抽象，让我们可以开发出一个个复用的小组件来构造应用
□ 任何的应用都会被抽象成组件树

1.1 注册组件的基本步骤

组件的使用分为三个步骤：
1.创建组件构造器 （调用Vue.extend()方法创建组件构造器）
2.注册组件 （调用Vue.component()方法注册组件）
3.使用组件 （在Vue实例的作用范围内使用组件）

■ 1.Vue.extend()：
调用Vue.extend()创建一个组件构造器
在构建组件构造器时，传入template代表我们自定义组件的模板
该模板是在使用到组件的 地方要显示的HTML代码
■ 2.Vue.component()：
调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。
所以需要传递两个参数：1、注册组件的标签名 2、组件构造器
■ 3.组件必须挂载在某个Vue实例下，否则它不会生效。

1.2 组件化的基本使用

组件名不能用myCpn类似名

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <my-cpn></my-cpn>
  </div>
  <script src="/js/vue.js"></script>
  <script>
    // 创建组件构造器
    const cpnC = Vue.extend({
      template: `
      <div>
        <h2>我是标题</h2>
        <p>我是内容, 哈哈哈哈</p>
        <p>我是内容, 呵呵呵呵</p>
      </div>`
    })
    // 注册组件
    Vue.component('my-cpn', cpnC)

    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊'
      }
    })
  </script>
</body>

</html>

在这里插入图片描述

全局组件和局部组件

全局组件
当我们通过Vue.component()注册组件时，组件的注册是全局的
意味着该组件可以在任何Vue示例下使用
局部组件
如果我们创建的组件是挂载到某个实例上，组件的注册是局部的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <my-cpn></my-cpn>
  </div>
  <div id="app2">
    <my-cpn></my-cpn>
  </div>
  <script src="/js/vue.js"></script>
  <script>
    // 构建组件构造器
    const cpnC = Vue.extend({
      template: `
      <div>
        <p>哈哈哈</p>
        <h4>i am good</h4>
      </div>
      `
    })
    // 注册组件(全局组件)
    // Vue.component('my-cpn',cpnC)
    const app = new Vue({
      el: '#app',
      // 局部组件
      components: {
        'my-cpn': cpnC
      }
    })
    const app2 = new Vue({
      el: '#app2'
    })
  </script>
</body>
</html>

父组件和子组件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <cpn1></cpn1>
    <cpn2></cpn2>
  </div>
  <script src="/js/vue.js"></script>
  <script>
    // 创建组件构造器
    const cpnC1 = Vue.extend({
      template: `
      <div>
        <p>这里显示的是：11111</p>
        <p>这里显示的是：22222</p>
      </div>
      `
    })
    const cpnC2 = Vue.extend({
      template:`
      <div>
        <h4>cpn2显示</h4>
        <p>这里显示：444</p>
        <cpn1></cpn1>
      </div>
      `,
      component: {
        cpn1: cpnC1,
      }
    })
    // 注册组件
    Vue.component('cpn1',cpnC1)
    const app = new Vue({
      el: "#app",
      components: {
        cpn2: cpnC2
      }
    })
  </script>
</body>
</html>

在这里插入图片描述

注册组件语法糖

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <my-cpn></my-cpn>
  </div>
  <script src="/js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      components: {
        "my-cpn": {
          template: `
          <div>
            <p>辣辣辣</p>
            <p>甜甜甜</p>
          </div>
          `
        }
      }
    })
  </script>
</body>
</html>

在这里插入图片描述

组件模块抽离方法

将HTML分离出来，挂载到对应组件上
有两种方式，一种用script标签，一种用template标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <cpn></cpn>
  </div>
  <!-- 1.使用<script>标签 -->
  <!-- <script type="x-template" id="cpn1">
    <div>
      <p>你的名字是</p>
      <h4>吕狗蛋</h4>
    </div>
  </script> -->

  <!-- 2.使用template标签 -->
  <template id="cpn1">
    <div>
      <p>你的名字是</p>
      <h4>吕狗蛋</h4>
    </div>
  </template>
  <script src="/js/vue.js"></script>
  <script>
    Vue.component('cpn',{
      template: "#cpn1"
    })
    const app = new Vue({
      el: "#app"
    })
  </script>
</body>
</html>

组件数据的存放

组件是一个单独封装的模块，这个模块有属于自己的HTML模板，也有属于自己的数据data
在组件中，不能直接访问Vue实例中的data
Vue组件应该有保存自己数据的地方

■ 组件数据的存放：
□ 组件对象有一个data属性，也有methods等属性
□ data属性必须是函数
□ 函数返回一个对象，对象中保存着数据

数据存放在组建的data中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <cpn></cpn>
  </div>
  <!-- 1.使用<script>标签 -->
  <!-- <script type="x-template" id="cpn1">
    <div>
      <p>你的名字是</p>
      <h4>吕狗蛋</h4>
    </div>
  </script> -->

  <!-- 2.使用template标签 -->
  <template id="cpn1">
    <div>
      <p>你的名字是</p>
      <h4>吕狗蛋</h4>
      <h5>{{message}}</h5>
    </div>
  </template>
  <script src="/js/vue.js"></script>
  <script>
    Vue.component('cpn',{
      template: "#cpn1",
      // data函数
      data() {
        return {
          message: "lyf"
        } 
      }
    })
    const app = new Vue({
      el: "#app"
    })
  </script>
</body>
</html>

在这里插入图片描述

组件中的data为什么必须是函数？

■ 首先，如果不是一个函数，Vue直接就会报错。
■ 其次，原因是在于Vue让每个组件对象都返回一个新的对象，因为如果是同一个对象的，组件在多次使用后会相互影响。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <cpn></cpn>
  </div>
  <script src="/js/vue.js"></script>
  <template id="cpn1">
    <div>
      <p>是我想太多</p>
      <p>我总这样说</p>
      <p>而你却没有</p>
      <p>真的心疼我</p>
    </div>
    <!-- 计算器 -->
    <h4>{{number}}</h4>
    <button @click="decrement">-</button>
    <button @click="increment">+</button>
  </template>
  <script>
    Vue.component('cpn',{
      template: "#cpn1",
      data() {
        return {
          number: 0
        }
      },
      methods: {
        decrement() {
          this.number--
        },
        increment() {
          this.number++
        }
      }
    })
    const app = new Vue({
      el: "#app"
    })
  </script>
</body>
</html>

父子组件的通信

子组件是不能引用父组件或者Vue实例的数据的
但是，在开发中，往往一些数据确实需要从上层传递到下层：
比如在一个页面中，我们从服务器请求到了很多的数据。
其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示。
这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件(父组件)将数据传递给小组件(子组件)
父子组件通信方式：
1.通过props向子组件传递信息
2.通过事件向父组件传递消息

父传子props驼峰标识

props下的对象需用驼峰写法，v-bind不能使用驼峰命名

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <!-- v-bind不能使用驼峰命名 -->
    <cpn :c-info="info"></cpn>
  </div>
  <template id="cpn">
    <h3>{{cInfo}}</h3>
    <!-- <div>
      <p>zzy</p>
      <p>my love</p>
    </div> -->
  </template>
  <script src="/js/vue.js"></script>
  <script>
    const cpn = {
      template: "#cpn",
      props: {
        cInfo: {
          type: Object,
          default() {
            return {}
          }
        }
      }
    }
    const app = new Vue({
      el: "#app",
      data: {
        info: {
          name: 'zzy',
          age: 18,
          hobby: 'shopping'
        }
      },
      components: {
        cpn
      }
    })
  </script>
</body>

</html>

在这里插入图片描述

子传父

子组件传递数据或事件到父组件中，我们需要用自定义事件完成
何时需要 自定义事件：
当子组件需要向父组件传递数据时，就可以用到自定义事件
v-on不仅可以用来监听DOM事件，也可以用于组件间的自定义事件
自定义事件的流程：
在子组件中，通过$emit()来触发事件
在父组件中，通过v-on来监听子组件事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <cpn @item-click="cpnClick"></cpn>
  </div>
  <template id="cpn">
    <div>
      <button v-for="item in categories" @click=btnClick(item)>{{item.name}}</button>
    </div>
  </template>
  <script src="/js/vue.js"></script>
  <script>
    const cpn = {
      template: "#cpn",
      data() {
        return {
          categories: [
            {id:"aaa", name:"热门推荐"},
            {id:"bbb", name:"手机数码"},
            {id:"ccc", name:"家用电器"},
            {id:"ddd", name:"电脑办公"},
          ]
        }
      },
      methods: {
        btnClick(item) {
          this.$emit('item-click',item)
        }
      }
    }
    const app = new Vue({
      el: "#app",
      data: {
        message: ''
      },
      components: {
        cpn
      },
      methods: {
        cpnClick() {
          console.log('cpnClick',item);
          
        }
      }
    })
  </script>
</body>
</html>

在这里插入图片描述

父子组件通信—结合双向绑定案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <cpn :number1="num1" :number2="num2" @num1change="num1change" @num2change="num2change"/>
  </div>
  <template id="cpn">
    <div>
      <p>props: {{number1}}</p>
      <p>data: {{dnumber1}}</p>
      <input type="text" :value="dnumber1" @input="num1Input"> 
      <p>props: {{number2}}</p>
      <p>data: {{dnumber2}}</p>
      <input type="text" :value="dnumber2" @input="num2Input">
    </div>
  </template>
  <script src="/js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        num1: 1,
        num2: 0
      },
      methods: {
        num1change(value) {
          this.num1 = parseFloat(value)
        },
        num2change(value){
          this.num2 = parseFloat(value)
        }
      },
      components: {
        cpn: {
          template: "#cpn",
          props: {
            // 确定类型
            number1: Number,
            number2: Number
          },
          data() {
            return {
              dnumber1: this.number1,
              dnumber2: this.number2
            }
          },
          methods: {
            num1Input(event) {
              // 将input中的value值赋值到dnumber中
              this.dnumber1 = event.target.value;
              // 为了让父组件的值可以修改，发出一个事件
              this.$emit('num1change',this.dnumber1)
              // 让number2的值对应改变
              this.dnumber2 = this.dnumber1*100
              this.$emit('num2change',this.dnumber2)
            },
            num2Input(event) {
              this.dnumber2 = event.target.value;
              this.$emit('num2change',this.dnumber2)
              this.dnumber1 = this.dnumber2 / 100
              this.$emit('num1change',this.dnumber1)
            }
          }
        }
      }
    })
  </script>
</body>

</html>

在这里插入图片描述

父子组件访问

父访问子 children-refs

$children
$refs 引用

子访问父 parent-root

cb++
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VueJs的组件化
欣欣博客
11-10 5945
组件化： 目的：让页面的元素的使用性和复用性更高。 使用： 1.通过Vue.extend()声明组件 2.将组件注册到Vue容器里面 3.声明Vue管理边界 定义： 组件就是将一些html+css+js封装成了一个整体，通过整体之间嵌套实现页面构建 1.声明组件： Vue.extend({}) 实现对象里面的一些参数 达到组装组件过程 Vue.extend() Vue是个构造
Vue.js——组件化实现和使用步骤——2020.11.23
weixin_43402353的博客
11-23 292
一丶什么是组件化？ 人面对复杂问题的处理方式： 任何一个人处理信息的逻辑能力都是有限的 所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容 但是，我们人有一种天生的能力，就是将问题进行拆解 如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解 组件化也是类似的思想： 如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得变得非常复杂，而且不利于后续的管理以及扩展 但如果，我们将一个页面拆分成一个个小的功能块，每个功能块完成
深入理解Vue.js轻量高效的前端组件化方案
10-17
主要介绍了深入理解Vue.js轻量高效的前端组件化方案 ,需要的朋友可以参考下
VueJs 的组件化
weixin_33676492的博客
10-20 266
概述 Vue支持封装HTML元素为组件，组件还可以组装成另一个组件，提高可复用性。 那么，有没有想过这些是怎么办到的呢？ 简单地拆分一小块HTML代码？不是的，前面提到过，Vue是通过render函数生成DOM的，所以组件也应该是由一个JavaScript对象表示，并且该对象会包含一个render函数。 其实除了根Vue实例，其它的组件都是Vue的子类的实例。 构造Vue子类的方法 Vue的子类是...
Vue.js组件化开发实践
weixin_33826268的博客
03-06 213
什么是Vue.js Vue.js 是一套构建用户界面的 渐进式框架。它非常容易与其它库或已有项目整合，而无须从头开始重构整个项目；另一方面，Vue 完全有能力驱动采用单文件组件来开发的更为复杂的单页应用。 目前在我参与开发维护的项目中已经使用上了Vue.js的一些基本功能，下面两幅图来自项目截图。 Vue.js基本功能 视图元素响应...
VUE.JS组件化开发实践
01-27
鉴于目前web前端mvvm框架以及组件化开发方式的流行，决定技术栈采用：vue +vuex+es6+browserify。这里首先简单说下web前端组件化开发方式的历程：最早的组件化结构，代码结构可能如下：将同功能的组件文件放到同一...
详解vue.js组件化开发实践
10-20
本篇文章主要介绍了vue.js组件化开发实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack+vue.js实现组件化详解
01-21
在vue中实现组件化用到了vue特有的文件格式.vue，在每一个.vue文件就是一个组件，在组件中我们将html，css，js全部写入，然后在webpack中配置vue-loader就可以了。 建立vue组件 在src目录下建立components文件夹，并...
vue组件
weixin_30786617的博客
05-27 141
todolist案例 布局问题 前端的UI组件库 组件 组件化 组件化是当今最为流行的一种可复用性增加的方法，随着当今前端开发的复杂度更加，这个组件化变得越来越流行 组件的基础 组件是一个具备html css img js …等的一个聚合体 组件的表现形式就类似一个标签 组件至少得有...
Vue.js--基本命令&组件化应用构建
drunkpragrammer的博客
08-25 1382
Vue.js 前言：Vue.js的官方学习网站是：https://cn.vuejs.org/v2/guide/#组件化应用构建 这里面讲述了Vuejs的指令，例如v-bind,v-if,v-on,v-model等等。 ----------------------------------------------------------------------------------------
vue.js原生组件化开发（一）——组件开发基础
weixin_34037173的博客
05-09 383
前言 vue作为一个轻量级前端框架，其核心就是组件化开发。我们一般常用的是用脚手架vue-cli来进行开发和管理，一个个组件即为一个个vue页面，这种叫单文件组件。我们在引用组件之时只需将组件页面引入，再注册即可使用。那么不用脚手架，如何进行组件开发呢，本文先介绍一下基础知识吧。 组件使用流程 1.组件构建 1.1 extend构建法 调...
Vue 组件化开发
热门推荐
花神的博客
12-20 3万+
Vue 组件化开发 提示： 本次分享知识点基于 vue.js，需要对 vue.js 有一定的了解。 什么叫做组件化 vue.js 有两大法宝，一个是数据驱动，另一个就是组件化，那么问题来了，什么叫做组件化，为什么要组件化？接下来我就针对这两个问题一一解答，所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。 因为组件是资源独立的，所以组件在系统内...
Vue使用日记（5）：Vue组件化理解（一）
jimson_zhu的博客
07-15 723
Vue组件化开发 组件化是Vue.js中的重要思想，任何应用都可以拆分成一个个组件进行管理和复用，如果将整个应用比喻成一棵树，那么这个应用会自上而下被拆分成独立的模块，形成一棵“组件树”。 注册组件的基本步骤： 1）创建组件构造器：调用Vue.extends()创建组件构造器； 2）注册组件：调用Vue.component()注册组件； 3）使用组件：在Vue实例作...
vuejs组件化开发
luvzen0127的博客
09-08 370
vuejs 组件化 之前学习的都是属于 vuejs 基础语法，今天学习一个稍微高阶一点的知识： vuejs 组件化开发 什么是组件化开发？ 组件化开发是近两年流行起来的一个开发模式，会把我们日常项目开发中一些常用的代码块封装起来，封装成一个一个的功能块，这个功能块里面包含了 结构、样式、行为、数据（state）、生命周期等。然后在做项目开发时候，项目的那些页面就由这些小的组件然后进行构成，类似乐高积木。 网站：（网页—>组件—>封装代码块） 常见的可以复用的代码： 按钮 弹出框 模态框 b
Vue基础知识总结 4：vue组件化开发
学Java，找哪吒
07-21 1万+
一、函数式编程 1、函数式编程简介 函数式编程是种编程方式，它将电脑运算视为函数的计算。函数编程语言最重要的基础是λ演算（lambda calculus），而且λ演算的函数可以接受函数当作输入（参数）和输出（返回值）。 和指令式编程相比，函数式编程强调函数的计算比指令的执行重要。 和过程化编程相比，函数式编程里函数的计算可随时调用。 filter函数自动过滤对象的所有元素，返回true才会存入指定对象； Reduce函数对数组内部的所有元素进行汇总； 2、代码实例 <!DOCTYPE
vuejs学习总结（六）——组件化
l118
04-19 227
这里写自定义目录标题组件化开发概述vue组件化思想注册组件的基本步骤 组件化开发 概述 我们人类在面对复杂问题的处理方法： 任何一个人处理信息的逻辑能力都是有限的， 所以，当面对一个非常复杂的问题时，我们不他可能一次性搞定一大堆内容 但是，我们人类有一种能力，就是将问题进行拆分，如果我们将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放入整体中，我们会发现大的问题也可以迎刃而解。 同理，组件...
Vue.js实现tab滑块效果
CodingNoob
04-17 4773
vuejs-----组件化开发
猪窝
04-27 637
什么是组件化？ 我们将一个完整的页面分成很多个组件。 每个组件都用于实现页面的一个功能块。 而每一个组件又可以进行细分。 Vue组件化思想 组件化是Vue.js中的重要思想 它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。 任何的应用都会被抽象成一颗组件树 组件化思想的应用： 有了组件化的思想，我们在之后的开发中就要充分的利用它。 尽可能的将页面拆分...
原生JavaScript实现一个简单的组件化Tab
超的博客
04-02 4281
Tab相信大家都不会陌生，他算是前端开发中最常见的组件之一。接下来我就跟大家分享一个我用原生JavaScript实现的一个简单的组件化Tab。首先是HTML结构，没什么好说的了吧。&lt;div id="tab1"&gt; &lt;ul class="tab-head"&gt; &lt;li&gt;tab1&lt;/li&gt; &lt;li&gt;tab2&lt;/li
vue.js组件的使用
最新发布
05-04
Vue.js 是一个流行的前端框架，它提供了一种组件化的方式来构建 Web 应用程序。Vue.js 组件是可重用的代码块，可以帮助我们快速构建复杂的用户界面。 以下是使用 Vue.js 组件的基本步骤： 1. 创建组件： 在 Vue.js...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值