初识Vue-组件化开发（详解各个组件）

目录

一、组件介绍

1.概念

2.特点

3.作用

4.应用

5.分类

二、组件语法

1.定义挂载vue应用

2.注册全局组件

实例

1.自定义组件

2.计数器

3.组件的复用

4.局部组件

实例

5.Prop

6.动态Prop

7.Prop 验证

三、创建组件的关键概念和语法

1. 组件定义

2. 组件选项

3. 单文件组件

4. Props

5. Emit 事件

四、总结

一、组件介绍

1.概念

Vue.js中的组件是可复用的Vue实例，具有自己的模板、逻辑和样式。组件允许开发者将页面分割成独立、可复用的模块，使得代码更易维护、可读性更高。

2.特点

  1. 模块化: 组件可以根据功能或UI部分进行划分，使得代码更加模块化，易于管理和维护。
  2. 可复用性: 组件可以被多次使用，不同的页面或应用中都可以引用同一个组件，提高了代码的复用性。
  3. 独立性: 每个组件都是相互独立的，组件之间的状态和逻辑不会相互影响，有利于代码的解耦和扩展。
  4. 单文件组件: Vue提供了单文件组件（.vue文件），将组件的模板、样式和逻辑封装在一个文件中，使得组件的结构更清晰，易于维护。

3.作用

  1. 页面划分: 将页面划分为独立的组件，提高了代码的组织性和可维护性。
  2. 代码复用: 将常用的UI部分或功能封装成组件，可以在不同的地方重复使用，减少了重复代码的编写。
  3. 提高开发效率: 组件化开发使得团队协作更加高效，每个成员可以专注于开发独立的组件，提高了开发效率。

4.应用

  1. Web应用开发: Vue组件广泛应用于Web应用开发中，用于构建各种UI组件、页面布局等。
  2. 移动应用开发: 结合Vue的移动端框架（如Vue Native、Weex等），可以开发跨平台的移动应用，组件在移动应用中也扮演着重要角色。
  3. 插件开发: Vue组件可以作为插件独立开发和维护，供其他开发者使用。

5.分类

  1. UI组件: 用于构建界面的各种UI元素，如按钮、表单、对话框等。
  2. 功能性组件: 实现特定功能的组件，如轮播图、导航菜单等。
  3. 布局组件: 用于页面布局的组件，如网格布局、卡片布局等。
  4. 业务逻辑组件: 实现业务逻辑的组件，如用户登录、购物车功能等。

二、组件语法

1.定义挂载vue应用

每个 Vue 应用都是通过用 createApp 函数创建的，传递给 createApp 的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。

一个应用需要被挂载到一个 DOM 元素中。

以下实例我们将 Vue 应用挂载到 <div id="app"></div>，应该传入 #app：

const RootComponent = { /* 选项 */ }
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

2.注册全局组件

注册一个全局组件语法格式如下：

const app = Vue.createApp({...})app.component('my-component-name', {/* ... */
})

my-component-name 为组件名，/* ... */ 部分为配置选项。注册后，我们可以使用以下方式来调用组件

<my-component-name></my-component-name>

一个简单的 Vue 组件的实例：

实例
1.自定义组件
<div id="app"><runoob></runoob>
</div><script>
// 创建一个Vue 应用
const app = Vue.createApp({})// 定义一个名为 runoob的新全局组件
app.component('runoob', {template: '<h1>自定义组件!</h1>'
})app.mount('#app')
</script>
2.计数器
// 创建一个Vue 应用
const app = Vue.createApp({})// 定义一个名为 button-counter 的新全局组件
app.component('button-counter', {data() {return {count: 0}},template: `<button @click="count++">点了 {{ count }} 次！</button>`
})
app.mount('#app')
</script>

3.组件的复用

你可以将组件进行任意次数的复用：

<div id="components-demo"><button-counter></button-counter><button-counter></button-counter><button-counter></button-counter>
</div>

4.局部组件

全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：

const ComponentA = {/* ... */
}
const ComponentB = {/* ... */
}
const ComponentC = {/* ... */
}

然后在 components 选项中定义你想要使用的组件：

const app = Vue.createApp({components: {'component-a': ComponentA,'component-b': ComponentB}
})

对于 components 对象中的每个属性来说，其属性名就是自定义元素的名字（component-a、component-b），其属性值就是这个组件的选项对象（ComponentA、ComponentB）。

我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：

实例

注册一个简单的局部组件 runoobA，并使用它：

<div id="app"><runoob-a></runoob-a>
</div>
<script>
var runoobA = {template: '<h1>自定义组件!</h1>'
}const app = Vue.createApp({components: {'runoob-a': runoobA}
})app.mount('#app')
</script>

5.Prop

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：

<div id="app"><site-name title="Google"></site-name><site-name title="Runoob"></site-name><site-name title="Taobao"></site-name>
</div><script>
const app = Vue.createApp({})app.component('site-name', {props: ['title'],template: `<h4>{{ title }}</h4>`
})app.mount('#app')
</script>

 一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。

6.动态Prop

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：

<div id="app"><site-infov-for="site in sites":id="site.id":title="site.title"></site-info>
</div><script>
const Site = {data() {return {sites: [{ id: 1, title: 'Google' },{ id: 2, title: 'Runoob' },{ id: 3, title: 'Taobao' }]}}
}const app = Vue.createApp(Site)app.component('site-info', {props: ['id','title'],template: `<h4>{{ id }} - {{ title }}</h4>`
})app.mount('#app')
</script>

7.Prop 验证

组件可以为 props 指定验证要求。

为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：

Vue.component('my-component', {props: {// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)propA: Number,// 多个可能的类型propB: [String, Number],// 必填的字符串propC: {type: String,required: true},// 带有默认值的数字propD: {type: Number,default: 100},// 带有默认值的对象propE: {type: Object,// 对象或数组默认值必须从一个工厂函数获取default: function () {return { message: 'hello' }}},// 自定义验证函数propF: {validator: function (value) {// 这个值必须匹配下列字符串中的一个return ['success', 'warning', 'danger'].indexOf(value) !== -1}}}
})

当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。

type 可以是下面原生构造器：

  • String
  • Number
  • Boolean
  • Array
  • Object
  • Date
  • Function
  • Symbol

三、创建组件的关键概念和语法

1. 组件定义

在 Vue 中，你可以使用 Vue.component() 方法来定义一个组件。例如：

Vue.component('my-component', {// 组件选项
})

2. 组件选项

组件选项是一个包含组件配置的对象，它可以包含以下选项：

  • data: 一个函数，返回组件的初始数据。每个组件必须将 data 返回为一个对象。
  • props: 用于接收父组件传递的数据。可以是数组或对象。
  • methods: 包含组件中使用的方法。
  • computed: 计算属性，可以根据其他数据的变化自动计算返回值。
  • watch: 监听数据变化并执行相应的操作。
  • template: 组件的模板，可以是字符串模板、template 元素或单文件组件。
  • components: 包含组件引用的对象，用于注册子组件。
  • created(): 组件创建时执行的钩子函数。
  • mounted(): 组件挂载到 DOM 后执行的钩子函数。
  • 等等...

3. 单文件组件

Vue 提供了单文件组件 (.vue)，它将模板、样式和逻辑封装在一个文件中。单文件组件通常包含三个部分：

  • <template>: 组件的 HTML 模板。
  • <script>: 组件的 JavaScript 代码，包含组件选项。
  • <style>: 组件的样式。

4. Props

Props 是父组件传递给子组件的数据。子组件通过 props 接收数据并在自己的作用域内使用。例如：

// 父组件
<my-component :message="parentMsg"></my-component>// 子组件
props: ['message']

5. Emit 事件

子组件可以通过 $emit() 方法触发自定义事件，并且可以传递数据给父组件。父组件可以通过监听子组件的事件来执行相应的操作。例如：

// 子组件
this.$emit('my-event', eventData)// 父组件
<my-component @my-event="handleEvent"></my-component>

四、总结

  1. 组件定义与注册：

    • 使用 Vue.component() 方法或单文件组件 (.vue) 定义组件。
    • 使用 Vue 实例中的 components 选项或局部/全局注册组件。

  2. 组件通信：

    • 使用 Props：父组件向子组件传递数据。
    • 使用 Emit 事件：子组件向父组件发送消息。

  3. 组件生命周期：

    • 生命周期钩子函数：created、mounted、updated、destroyed 等。

  4. 组件选项：

    • data: 组件的初始数据。
    • props: 接收父组件传递的数据。
    • methods: 包含组件中使用的方法。
    • computed: 根据其他数据计算返回值的计算属性。
    • watch: 监听数据变化并执行相应的操作。
    • template: 组件的模板。
    • components: 注册子组件。

  5. 单文件组件：

    • 使用 .vue 文件封装组件的模板、样式和逻辑。

  6. 组件复用与组合：

    • 提高代码复用性，将常用的功能封装为组件。
    • 使用 mixin 或 extends 实现组件的复用。
    • 使用插槽 (slot) 实现组件的组合。

  7. 动态组件：

    • 使用动态组件 (dynamic component) 根据条件渲染不同的组件。

  8. 组件样式：

    • 使用作用域样式 (scoped style) 使样式仅在当前组件中生效。

  9. 组件库与框架：

    • 使用现有的组件库或框架加速开发。
    • 如 Element UI、Vuetify、Bootstrap Vue 等。

  10. 测试与调试：

    • 编写单元测试以确保组件功能的正确性。
    • 使用 Vue DevTools 调试 Vue.js 应用程序。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/5713.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

mybatis批量保存工具类实用

mybatis批量保存工具类实用

一、代码 import org.apache.ibatis.session.ExecutorType; import org.apache.ibatis.session.SqlSession; import org.apache.ibatis.session.SqlSessionFactory; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.jdbc.core.JdbcTemp…
阅读更多...
正版Office-Word使用时却提示无网络连接请检查你的网络设置 然后重试

正版Office-Word使用时却提示无网络连接请检查你的网络设置 然后重试

这是购买电脑时自带的已经安装好的word。看纸箱外壳有office标记&#xff0c;但是好像没有印系列号。 某天要使用。提示&#xff1a;无网络连接请检查你的网络设置。 经过网上高手的提示&#xff1a; 说要勾选勾选ssl3.0、TLS1.0、1.1、1.2。 我的截图 我电脑进去就缺1.2. …
阅读更多...
PCIe总线-MPS MRRS RCB参数介绍（四）

PCIe总线-MPS MRRS RCB参数介绍（四）

1.概述 PCIe总线的存储器写请求、存储器读完成等TLP中含有数据负载&#xff0c;即Data Payload。Data Payload的长度和MPS&#xff08;Max Payload Size&#xff09;、MRRS&#xff08;Max Read Request Size&#xff09;和RCB&#xff08;Read Completion Boundary&#xff0…
阅读更多...
PostgreSQL的pg_archivecleanup工具

PostgreSQL的pg_archivecleanup工具

PostgreSQL的pg_archivecleanup工具 pg_archivecleanup 是 PostgreSQL 中用于管理 WAL&#xff08;Write-Ahead Logging&#xff09;归档目录的工具。在使用基于归档的日志复制或持久化存储时&#xff0c;pg_archivecleanup 用来清理那些不再需要的归档日志文件&#xff0c;帮…
阅读更多...
vue中的数据共享场景和数据共享方法总结

vue中的数据共享场景和数据共享方法总结

1、数据共享场景有哪些 页面之间共享数据&#xff1a; 不同页面之间需要共享数据时&#xff0c;可以通过 Vuex 状态管理库或路由参数等方式进行数据传递。例如&#xff0c;在路由参数中传递数据或将数据存储在 Vuex 中&#xff0c;在不同页面间进行数据交换。页面和组件之间共…
阅读更多...
C++ 抽象机制

C++ 抽象机制

抽象机制 1. 虚函数 使用关键字virtual 声明的函数&#xff0c;意思是可能随后在其派生类中重新定义。 纯虚函数 在声明的末尾使用0 的函数&#xff0c;说明是纯虚函数。 抽象类 含有纯虚函数多的类称为抽象类(abstract class). 多态类型 如果一个类负责为其他一些类提供接…
阅读更多...
unity入门——按钮点击了却无法调用函数

unity入门——按钮点击了却无法调用函数

查阅了一番都没有解决问题&#xff0c;最后发现问题是由button的Onclick()事件绑定了代码脚本而不是游戏对象导致的。 如果Onclick()事件绑定的是代码脚本&#xff0c;则下拉框里没有函数&#xff0c;但是点击MonoScript后能手动填入函数名&#xff08;本以为这样就能实现调用…
阅读更多...
State.initState() must be a void method without an `async` keyword错误解析

State.initState() must be a void method without an `async` keyword错误解析

文章目录 报错问题报错的代码 错误原因解决方法解析 另外的方法 报错问题 State.initState() must be a void method without an async keyword如下图&#xff1a; 报错的代码 报错的代码如下&#xff1a; overridevoid initState() async{super.initState();await getConf…
阅读更多...
openssl3.2 - exp - 使用默认的函数宏，在release版中也会引入__FILE__

openssl3.2 - exp - 使用默认的函数宏，在release版中也会引入__FILE__

文章目录 openssl3.2 - exp - 使用默认的函数宏&#xff0c;在release版中也会引入__FILE__概述笔记验证是否__FILE__在release版下也能用&#xff1f;将openssl编译成release版的&#xff0c;看看CRYPTO_free()是否只需要一个参数就行&#xff1f;将工程中的openssl相关的库换…
阅读更多...
重定义大语言模型的记忆能力：对抗性压缩如何挑战现有测量法

重定义大语言模型的记忆能力：对抗性压缩如何挑战现有测量法

DeepVisionary 每日深度学习前沿科技推送&顶会论文分享&#xff0c;与你一起了解前沿深度学习信息&#xff01; Rethinking LLM Memorization through the Lens of Adversarial Compression 引言&#xff1a;探索大型语言模型的记忆能力 在当今信息时代&#xff0c;大型…
阅读更多...
Window（Qt/Vs）软件添加版本信息

Window（Qt/Vs）软件添加版本信息

Window&#xff08;Qt/Vs&#xff09;软件添加版本信息 文章目录 Window&#xff08;Qt/Vs&#xff09;软件添加版本信息VS添加版本信息添加资源文件添加版本定义头自动更新版本添加批处理脚本设置生成事件 Qt添加版本信息添加资源文件文件信息修改自动更新版本 CMake添加版本信…
阅读更多...
React 中使用 TS

React 中使用 TS

目录 1&#xff0c;搭建项目2&#xff0c;tsconfig.json 相关配置项1&#xff0c; lib2&#xff0c;module3&#xff0c;jsx 3&#xff0c;在 React 中使用 TS3.1&#xff0c;TS 可以解决的问题3,2&#xff0c;函数式组件3.3&#xff0c;类组件3.4&#xff0c;Props 的默认值方…
阅读更多...
#ESP32S3R8N8建立工程（VSCODE）点亮LED

#ESP32S3R8N8建立工程（VSCODE）点亮LED

1.参考文档 【立创ESP32S3R8N8】IDF入门手册 - 飞书云文档 (feishu.cn)https://lceda001.feishu.cn/wiki/GOIlwwfbIi1SC3k8594cDeFVn8g 2.建立工程 3.运行效果 4.更改配置 5.插播 之前配置的环境是有问题的&#xff0c;就算有自动检测也要仔细检查&#xff0c;必须严格按照以…
阅读更多...
VMware安装ubuntun虚拟机使用桥接模式无法上网问题解决

VMware安装ubuntun虚拟机使用桥接模式无法上网问题解决

问题&#xff1a;最近准备使用VMware虚拟机搭建k8s集群服务&#xff0c;因为需要在同一个网段下&#xff0c;我使用桥接的方式&#xff0c;我发现主机在使用有线连接时虚拟机网络连接正常&#xff0c;但是使用无线网就显示连接不上网络。 解决方法 一、查看网络连接&#xff…
阅读更多...
aardio封装库) 微软开源的js引擎(ChakraCore)

aardio封装库) 微软开源的js引擎(ChakraCore)

前言 做爬虫肯定少不了JavaScript引擎的使用&#xff0c;比如在Python中现在一般用pyexecjs2来执行JavaScript代码&#xff0c;另外还有一些其他执行JavaScript的库&#xff1a; https://github.com/eight04/node_vm2: rpc调用nodejs&#xff0c;需要安装nodehttps://github.…
阅读更多...
Spring Data JPA数据批量插入、批量更新真的用对了吗

Spring Data JPA数据批量插入、批量更新真的用对了吗

Spring Data JPA系列 1、SpringBoot集成JPA及基本使用 2、Spring Data JPA Criteria查询、部分字段查询 3、Spring Data JPA数据批量插入、批量更新真的用对了吗 前言 在前两篇文章已经介绍过&#xff0c;在使用Spring Data JPA时&#xff0c;DAO层的Respository通过继承J…
阅读更多...
BigKey的危害

BigKey的危害

1.2.1、BigKey的危害 网络阻塞 对BigKey执行读请求时&#xff0c;少量的QPS就可能导致带宽使用率被占满&#xff0c;导致Redis实例&#xff0c;乃至所在物理机变慢 数据倾斜 BigKey所在的Redis实例内存使用率远超其他实例&#xff0c;无法使数据分片的内存资源达到均衡 Redis阻…
阅读更多...
Python中动画显示与gif生成

Python中动画显示与gif生成

1. 动画生成 主要使用的是 matplotlib.animation &#xff0c;具体示例如下&#xff1a; import matplotlib.pyplot as plt import matplotlib.animation as animation import numpy as np fig, ax plt.subplots() t np.linspace(0, 3, 40) g -9.81 v0 12 z g * t**2 / …
阅读更多...
等保测评多选模拟题

等保测评多选模拟题

21、以下哪些是黑客攻击手段&#xff1f;_____&#xff08;ABCDEFG&#xff09; A、暴力猜测 B、利用已知漏洞攻击 C、特洛伊木马 D、拒绝服务攻击 E、缓冲区溢出攻击 F、嗅探sniffer G、社会工程 22、计算机病毒的特点有_____。&#xff08; CD …
阅读更多...
NFT是什么？有什么用途？

NFT是什么？有什么用途？

NFT&#xff0c;即非同质化代币&#xff08;Non-Fungible Token&#xff09;&#xff0c;是Web3技术的另一个重要应用。与比特币这样的同质化加密货币不同&#xff0c;NFT是独一无二的&#xff0c;每个代币都代表了一个独特的资产或物品。NFT通常基于区块链技术&#xff0c;如以…
阅读更多...
最新文章

Copyright @ 2022~2023