首页 > 其他分享 >Vue.js 组件开发

Vue.js 组件开发

时间：2024-11-30 13:03:43浏览次数：7  
标签：Vue js export 组件 message data

代码、提高代码复用性以及构建复杂的用户界面。今天，我们就一起来深入学习 Vue.js 组件开发的相关知识。

一、什么是 Vue.js 组件

  • 概念：Vue.js 组件可以看作是页面中的一个个独立的、可复用的小块。就好比搭积木一样，每个组件都是一块有着特定功能和外观的积木块，我们可以通过组合这些不同的 “积木”（组件）来搭建出完整的页面（大型的应用界面）。例如，一个网页中的导航栏、侧边栏、卡片等都可以分别封装成一个个组件。
  • 优点：
    • 代码复用性高：我们只需要编写一次组件的代码，然后在多个地方都可以重复使用它，大大减少了重复代码的编写，提高了开发效率。比如，在电商网站中，商品展示的卡片样式基本一致，我们将其封装成组件后，不管是在首页推荐商品列表，还是在分类商品页面等都能复用这个卡片组件。
    • 易于维护和扩展：每个组件都有自己独立的逻辑、样式和模板，当需要对某个功能进行修改或者添加新功能时，我们可以很容易定位到对应的组件代码进行操作，而不用担心影响到其他不相关的部分。
    • 团队协作更方便：不同的开发者可以负责不同的组件开发，最后将这些组件整合在一起，这样分工明确，提高了团队开发的效率和协同性。

二、组件的基本结构

在 Vue.js 中，一个基本的组件通常包含三个核心部分：模板（template）、脚本（script）和样式（style）。

（一）模板（template）

  • 作用：定义组件的 HTML 结构，也就是组件在页面上长什么样，包含哪些元素以及元素之间的布局等。例如，下面是一个简单的按钮组件的模板示例：
  • <template>
  <button class="my-button">{{ buttonText }}</button>
</template>

    这里定义了一个简单的 <button> 元素，并且通过双大括号插值表达式 {{ buttonText }} 来显示一个文本内容（这个文本内容是由组件的 data 属性中的 buttonText 变量提供的，后面会讲到）。

    （二）脚本（script）

  • 作用：主要用于定义组件的逻辑，比如组件的数据、方法、生命周期钩子等。以下是对应上面按钮组件的脚本部分示例：
  • <script>
export default {
  name: 'MyButton',
  data() {
    return {
      buttonText: '点击我'
    }
  }
}
</script>

    在这个脚本中，我们通过 export default 导出了一个对象，这个对象代表了组件的配置选项。name 属性给组件起了个名字叫 MyButton，方便在调试等场景下识别组件。data 函数返回一个对象，里面定义了组件的数据，在这里就是 buttonText 变量，它的值会显示在按钮上。

    （三）样式（style）

  • 作用：用于给组件添加样式，控制组件的外观表现，比如颜色、尺寸、边框等。示例如下：
  • <style scoped>
.my-button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}
</style>

    注意这里的 scoped 属性，它表示这个样式只作用于当前组件内部，避免样式冲突，是一种很好的样式隔离方式。这样不同组件即便有相同的类名，它们的样式也不会相互干扰。

    三、组件的注册与使用

    （一）全局注册

  • 方式：在创建 Vue 实例之前，使用 Vue.component() 方法来注册组件。例如，我们要全局注册上面的 MyButton 组件，可以这样做：
Vue.component('my-button', {
  template: '<button class="my-button">{{ buttonText }}</button>',
  data() {
    return {
      buttonText: '点击我'
    }
  }
});

new Vue({
  el: '#app'
});

  • 特点：全局注册后，在整个 Vue 应用的任何地方都可以直接使用这个组件，不需要额外的导入等操作。但是，如果组件过多，会导致应用初始化时加载的代码量比较大，而且可能会出现命名冲突等问题，所以要谨慎使用全局注册，适合那些在整个应用中频繁使用的基础组件，比如全局的导航栏组件等。

（二）局部注册

  • 方式：在需要使用组件的 Vue 实例或者其他组件内部，通过 components 属性来进行局部注册。以下是在一个单文件组件中局部注册 MyButton 组件并使用的示例：
<template>
  <div>
    <my-button></my-button>
  </div>
</template>

<script>
import MyButton from './MyButton.vue';

export default {
  components: {
    MyButton
  }
}
</script>

<style scoped>

</style>

在脚本部分，我们通过 import 语句导入了 MyButton 组件，然后在 components 属性中，将其以键值对的形式添加进去（这里键就是组件在模板中使用的标签名，值就是导入的组件对象，当键和值的变量名相同时，可以简写成上面的形式）。这样，这个 MyButton 组件就只能在当前这个组件内部使用了，实现了更细粒度的组件管理，避免不必要的全局污染。

四、组件通信

在 Vue.js 应用中，组件之间往往需要进行数据传递和交互，常见的组件通信方式有以下几种：

（一）父传子（Props）

  • 原理：父组件通过自定义属性（props）的方式向子组件传递数据。子组件需要显式地声明接收哪些 props，然后就可以在子组件内部使用这些来自父组件的数据了。

  • 示例：

    • 父组件代码片段：
<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: '这是父组件传递给子组件的消息'
    }
  }
}
</script>

  • 子组件代码片段：
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: ['message']
}
</script>

在父组件中，通过 :message（这里 : 表示绑定属性，message 就是自定义的属性名）将 parentMessage 数据传递给子组件。子组件通过 props 数组声明接收 message 属性，然后就能在模板中使用 {{ message }} 来显示这个数据了。

（二）子传父（自定义事件）

  • 原理：子组件通过触发自定义事件，并且传递相应的数据，父组件监听这个自定义事件来接收子组件传来的数据。

  • 示例：

    • 子组件代码片段：
<template>
  <button @click="sendMessage">向父组件发送消息</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('child-message', '这是子组件传来的消息');
    }
  }
}
</script>

子组件中，当点击按钮时，通过 this.$emit 方法触发了一个名为 child-message 的自定义事件，并且传递了一个字符串数据。

  • 父组件代码片段：
<template>
  <div>
    <child-component @child-message="handleChildMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildMessage(message) {
      console.log(message);
    }
  }
}
</script>

父组件通过 @child-message（这里 @ 表示监听事件）来监听子组件触发的 child-message 事件，并且在 handleChildMessage 方法中接收子组件传递过来的数据进行相应的处理，比如这里只是简单地打印到控制台。

（三）兄弟组件通信（借助事件总线或 Vuex）

  • 事件总线（Event Bus）方式：
    • 原理：创建一个空的 Vue 实例作为事件总线，各个兄弟组件可以通过在这个事件总线上触发和监听事件来实现数据传递。
    • 示例：
      • 创建事件总线实例（通常在一个单独的文件中，比如 event-bus.js）：
      • import Vue from 'vue';
export const eventBus = new Vue();

      • 组件 A 代码片段（发送数据）：
      • <template>
  <button @click="sendDataToBrother">向兄弟组件发送数据</button>
</template>

<script>
import { eventBus } from './event-bus.js';

export default {
  methods: {
    sendDataToBrother() {
      eventBus.$emit('data-from-a', '这是组件 A 传来的数据');
    }
  }
}
</script>

  • 组件 B 代码片段（接收数据）：
<template>
  <div>等待接收兄弟组件数据...</div>
</template>

<script>
import { eventBus } from './event-bus.js';

export default {
  mounted() {
    eventBus.$emit('data-from-a', (data) => {
      console.log(data);
    });
  }
}
</script>

组件 A 通过事件总线触发 data-from-a 事件并传递数据，组件 B 在挂载时监听这个事件来接收数据。

  • Vuex 方式（适合更复杂的应用场景）：
    • 原理：Vuex 是 Vue.js 的状态管理模式和库，它集中管理整个应用的所有组件共享的数据。各个组件可以通过提交 mutation、触发 action 等方式来改变或者获取 Vuex 中的状态数据，从而实现数据的共享和通信。这里由于篇幅限制，就不详细展开 Vuex 的具体使用了，后续可以专门写一篇关于 Vuex 的博客来深入学习。

五、组件的生命周期

Vue.js 组件从创建到销毁有一系列的生命周期钩子函数，这些函数会在特定的阶段被自动调用，我们可以在这些钩子函数中执行相应的逻辑，比如初始化数据、发起网络请求、操作 DOM 等。

（一）主要的生命周期钩子

  • beforeCreate：在组件实例刚被创建，数据观测（data）和事件配置等都还没初始化的时候被调用。这个阶段，组件实例上只有一些默认的属性和方法，比如 $options 等，无法访问到 data 中的数据和组件的方法等。
  • created：组件实例创建完成后立即被调用，此时已经完成了数据观测（data）、属性和方法的计算等，但是还没有开始挂载到 DOM 上，所以在这里可以访问和操作 data 中的数据、调用组件的方法等，通常我们可以在这里发起一些异步数据请求等操作。
  • beforeMount：在组件挂载到 DOM 之前被调用，此时模板已经编译好了，但是还没有真正渲染到页面上，我们可以在这里对最终要渲染的 DOM 结构做一些最后的调整等操作。
  • mounted：组件挂载到 DOM 之后被调用，此时组件已经渲染到页面上了，可以在这里获取到组件对应的 DOM 元素，进行一些基于 DOM 的操作，比如获取某个元素的宽度、高度，添加一些自定义的 DOM 事件等。
  • beforeUpdate：当组件的数据发生变化，即将重新渲染之前被调用。在这里可以对更新前的数据做一些记录或者对比等操作，判断是否真的需要进行更新等。
  • updated：组件的数据更新并且重新渲染到页面上之后被调用，此时要注意避免在这个钩子函数中做一些会再次触发数据更新的操作，不然可能会导致死循环等问题。
  • beforeDestroy：在组件即将被销毁之前被调用，我们可以在这里做一些清理工作，比如清除定时器、取消订阅的事件等，避免内存泄漏等问题。
  • destroyed：组件已经被销毁后被调用，此时组件的所有实例、DOM 元素等都已经被移除了，通常不需要在这里再做太多操作了。

（二）示例代码

以下是一个简单的示例，展示如何在组件的生命周期钩子中添加逻辑：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: '初始消息'
    }
  },
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
    this.message = '在 created 钩子中修改消息';
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeDestroy() {
    console.log('beforeDestroy');
  },
  destroyed() {
    console.log('destroyed');
  }
}
</script>

当我们在页面中使用这个组件时，随着组件的创建、挂载、数据更新以及销毁等过程，对应的生命周期钩子函数就会按照顺序被触发，并且相应的控制台日志会打印出来，帮助我们更好地理解组件的生命周期流程。

通过以上内容的学习，相信大家对 Vue.js 组件开发有了一个比较全面的认识。在实际的项目开发中，多多练习组件开发，熟练掌握组件通信和生命周期等关键知识点，就能利用 Vue.js 更高效地构建出优秀的前端应用啦。希望这篇博客能对大家学习 Vue.js 组件开发有所帮助，后续还会分享更多关于 Vue.js 以及前端开发的相关知识哦，欢迎持续关注！

标签：Vue,js,export,组件,message,data
From： https://blog.csdn.net/m0_74620645/article/details/144144335

相关文章

  • 使用NodeJS搭建简易服务器
    什么是NodeJSNode.js基于Chrome浏览器的V8引擎，是一个JavaScript运行时环境。简单来说，Node.js提供了一个能够对JavaScript代码进行编译和执行的环境，同时Node.js还提供了一系列内置的API，使得开发者可以使用JavaScript进行后端开发。这些API涵盖了文件系统操作、......
  • 【开源免费】基于Vue和SpringBoot的校园资料分享平台（附论文）
    博主说明：本文项目编号T059，文末自助获取源码\color{red}{T059，文末自助获......
  • 【开源免费】基于Vue和SpringBoot的微服务在线教育系统（附论文）
    博主说明：本文项目编号T060，文末自助获取源码\color{red}{T060，文末自助获......
  • 通过命令符创建vue项目
    一、环境搭建1.检查node的安装，没有就需要下载（可以使用nvm安装node）①Win+R指令，打开命令框输入cmd②检查nvm是否安装成功(安装成功会显示对应的版本）nvm-v2.配置淘宝源在安装nvm的文件夹里面有setting.txt文件，在里面插入以下内容：node_mirror:https://npm.taobao.or......
  • node.js毕设旅游景区智能门票系统规划设计 程序+论文
    本系统（程序+源码+数据库+调试部署+开发环境）带文档lw万字以上，文末可获取源码系统程序文件列表开题报告内容一、选题背景关于旅游景区智能门票系统的研究，现有研究多集中在其基本功能实现方面，如在线购票等功能的实现14。专门针对系统的整体规划设计，结合多种功能如用户、景点......
  • node.js毕设农村留守儿童爱心帮扶平台 程序+论文
    本系统（程序+源码+数据库+调试部署+开发环境）带文档lw万字以上，文末可获取源码系统程序文件列表开题报告内容一、选题背景关于农村留守儿童爱心帮扶平台的研究，现有研究主要以留守儿童的某一方面问题为主，如心理健康或者教育资源匮乏等单一角度的研究较多。专门针对构建一个综......
  • 基于智能Ai+SpringBoot+Vue+MySQL的数码论坛系统设计与实现（供毕业设计、课程设计参考）
    文章目录1.内容见下图2.详细视频演示3.系统运行效果介绍4.技术框架4.1前后端分离架构介绍4.3程序操作流程5.项目推荐6.成品项目7.系统测试7.1系统测试的目的7.2系统功能测试8.代码参考9.为什么选择我？10.获取源码1.内容见下图2.详细视频演示文章......
  • 基于智能AI+SpringBoot+Vue的社区医疗综合服务平台（毕业设计：选题+开题+程序设计+文档+P
    文章目录1.内容见下图2.详细视频演示3.系统运行效果介绍4.技术框架4.1前后端分离架构介绍4.3程序操作流程5.项目推荐6.成品项目7.系统测试7.1系统测试的目的7.2系统功能测试8.代码参考9.为什么选择我？10.获取源码1.内容见下图2.详细视频演示文章......
  • 基于推荐算法+SpringBoot+Vue的网上购物商城系统（毕业设计：选题+开题+程序设计+文档+PPT
    文章目录1.内容见下图2.详细视频演示3.系统运行效果介绍4.技术框架4.1前后端分离架构介绍4.3程序操作流程5.项目推荐6.成品项目7.系统测试7.1系统测试的目的7.2系统功能测试8.代码参考9.为什么选择我？10.获取源码1.内容见下图2.详细视频演示文章......
  • 《Learn Three.js》学习（4） 材质
    前言：材质为scene中物体的皮肤，有着不同的特性和视觉效果。材质的共有属性：基础属性：融合属性：融合决定了我们渲染的颜色如何与它们后面的颜色交互高级属性：与WebGL内部有关简单材质：MeshBasicMaterial创建材质：可以使用构造函数一次性传完所有参数；或先创建一个实例，再对......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99