手拉手Vue组件由浅入深

组件 (Component) 是 Vue.js 最强大的功能之一，它是html、css、js等的一个聚合体，封装性和隔离性非常强。

组件化开发：
    1、将一个具备完整功能的项目的一部分分割多处使用
    2、加快项目的进度
    3、可以进行项目的复用

组件注册分为：全局注册和局部注册

目录

Vue组件

组件的生命周期钩子

组件嵌套关系

组件注册

组件数据传递props

传递数组，对象

类型验证

Props实现子传父

组件数据传递$emit

组件+v-model

透传

动态组件

​编辑

​编辑

异步组件

依赖注入-透传

Vue组件

组件的优点：可复用性

组件构成

<template></template><script>export default{}</script><style></style>

组件引入

组件的生命周期钩子

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

创建期：beforeCreate、created

挂载期：beforeMount 、mounted

更新期：beforeUpdate、updated

销毁期：beforeUnmount 、unmountd

<script>
export default{
beforeCreate(){console.log("创建之前")
},
created(){console.log("创建之后")},
beforeMount(){console.log("挂载之前")
},mounted(){console.log("挂载之后")
},beforeUpdate(){console.log("更新之前")
},updated(){console.log("更新之后")
},beforeUnmount(){console.log("销毁之前")
},unmountd(){console.log("销毁之后")
}
}
</script>

组件嵌套关系

组件允许将ui划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际项目中，组件是层层嵌套的树形结构，每个组件内封装自定义内容与逻辑。

取消main.css依赖

Article.vue

<template><H3>Article</H3>
</template><style scoped>
h3{width: 80%;margin: 0 auto;text-align: center;line-height: 100px;box-sizing: border-box;margin-top: 25px;background: #bdbaba;    
}</style>

Item.vue
 

<template><H3>Item</H3>
</template><style scoped>h3{width: 80%;margin: 0 auto;text-align: center;line-height: 100px;box-sizing: border-box;margin-top: 25px;background: #bdbaba;    
}</style>

Hrader.vue

<template><H3>Header</H3>
</template><style scoped>h3{width: 100%;height: 100px;border: 5px solid #999;text-align: center;line-height: 100px;box-sizing: border-box;}
</style>

Main.vue

<template><div class="main"><H3>Main</H3>    <Article/><Article/><Article/></div></template><script>import Article from "./article.vue"
export default{components:{Article}
}</script><style scoped>.main{float: right;width: 85%;height: 500px;border: 5px solid #999;box-sizing: border-box;text-align: center;
}</style>

Aside.vue

<template><div class="aside"><H3>Aside</H3><Item/>  <Item/><Item/></div></template><script>
import Item from './Item.vue';
export default{components:{Item}}</script><style scoped>.aside{float: left;width: 14%;height: 500px;border: 5px solid #999;box-sizing: border-box;text-align: center;
}</style>

效果

组件注册

局部注册(建议使用)

在一个组件中进行注册

全局注册

在main.js中全局注册

全局注册很方便，但是在全局注册中，没有被使用的组件无法在生成打包的时候被自动移除(“tree-shaking”)，依然出现在打包后的js文件中。

在项目嵌套较多的时候，全局注册的依赖关系不明确，可能影响应用长期维护性。

组件数据传递props

组件之间是可以传递数据，而传递数据的解决方案是props，注：props传递数据只能父级传递子级。

组件传递的数据类型：数字、对象、数字等。任何类型的值都可以作为props的值传递

组件间传递数据应用场景: 父传子

Parent.vue

<template><h3>Parent</h3><input v-model="msg"><Child :title="msg" test="数据"/>
</template><script>
import Child from './Child.vue';
export default{data(){return{msg:""}},components:{Child}
}</script>

Child.vue

<template><h3>Child</h3><p> {{ title }} </p><p>{{ test }}</p></template><script>
export default{data(){return{}},//接收数据props:["title","test"]
}</script>

传递效果

传递数组，对象

Parent.vue

<template><h3>Parent</h3><input v-model="msg"><Child :title="msg" test="数据" :names="names" :user="user" :number1="number1"/>
</template><script>
import Child from './Child.vue';
export default{data(){return{msg:"",names:["张三","李四","王五"],user:{name:"张三",age:20},number1:123}},components:{Child}
}</script>

Child.vue

<template><h3>Child</h3><p> {{ title }} </p><p>{{ test }}</p><p v-for="(name,index) of names" :key="index">{{ index }} : {{ name }}</p><p>{{ user.name }} {{ user.age }}</p>
</template><script>
export default{data(){return{}},//接收数据props:["title","test","names","user"]}</script>

传递对象

类型验证

<template><h3>Child</h3><p> {{ title }} </p><p>{{ test }}</p><p v-for="(name,index) of names" :key="index">{{ index }} : {{ name }}</p><p>{{ user.name }} {{ user.age }}</p></template><script>
export default{data(){return{}},//接收数据props:{title:{type:[String,Number,Array,Object]},names:{type:Array},user:{type:Object,//必选项required:true},test:{type:String},number:{type:Number,default:0}}}
</script>

Props实现子传父

组件数据传递$emit

组件模板表达式中，可以使用$emit方法触发自定义事件

组件间传递数据应用场景:子传父

Child.vue

<template>Child<button @click="clickEventHandle">向父组件发送数据</button></template><script>
export default{data(){return{msg:"传递数据"}},methods:{clickEventHandle(){this.$emit("eventDemo",this.msg)}}}</script>

Parent2.vue

<template>
<Child @eventDemo="getHandle"/>
</template>
<script>
import Child from "./Child.vue"
export default {components:{Child},methods:{getHandle(data){console.log(data)}}
}</script>

组件+v-model

查询：<input type="text" v-model="search">

watch:{search(newValue,oldValue){this.$emit("searchEvent",newValue)}},

透传

透传attribute指的是传递给一个组件，没有被该组件声明为props或emits的arrtibute或者v-on事件监听器。最常见的例子就是class、id、style。

一个组件以单个元素为根做渲染时，透传的attribute会自动被添加到根元素上

App.vue

Attr.vue

<template><h2>透传属性测试</h2>
</template><style>
.colorDemo{color: aqua;
}
</style>

效果

禁用透传attribute

export default{inheritAttrs:false
}

动态组件

<template>
<component :is="tabComponent"></component>
<button @click="changeComponent">切换组件</button>
</template><script >
import ComponentsA from "./components/ComponentsA.vue"
import ComponentsB from "./components/ComponentsB.vue"
export default{data(){return{tabComponent:"ComponentsA"}},methods:{changeComponent(){// 三元运算符this.tabComponent= this.tabComponent =="ComponentsA"? "ComponentsB" : "ComponentsA"}}

当使用<component :is="tabComponent"></component>在多个组件间切换时，被切换掉的组件会被卸载。可以通过<keep-alive>组件前置被切换掉的组件依然保持“存活状态”

<KeepAlive>
<component :is="tabComponent"></component>
</KeepAlive>

异步组件

Vue提供了defineAsyncComponent实现异步组件功能。

import ComponentsA from "./components/ComponentsA.vue"
//异步加载组件
const ComponentsB =defineAsyncComponent(()=>import("./components/ComponentsB.vue")
).catch(function(error){console.log(error);
})


异步组件的优势
1.减少应用程序的初始加载时间
异步组件只有在需要使用该组件时才会进行加载，可以减少应用程序的初始加载时间，提高用户体验。
2.提高应用程序的性能
异步组件可以将组件的加载和渲染分开进行，可以提高应用程序的性能，避免不必要的渲染。
3.优化代码的可维护性
异步组件可以将组件按需加载，可以优化代码的可维护性，减少代码的复杂度。

异步组件的注意事项

1.异步组件的加载时间
异步组件是按需加载的，因此在使用异步组件时，需要考虑组件的加载时间。如果组件的加载时间过长，会对应用程序的性能和用户体验产生影响。
2.异步组件的错误处理
在使用异步组件时，需要对组件加载过程进行错误处理，避免出现错误导致应用程序无法运行。可以通过 catch() 方法来捕获异步加载组件时的错误。

依赖注入-透传

prop逐级透传可以用provide和inject解决这一问题。一个父组件相对于其所有的子组件，会作为依赖提供者。任何子组件树，无论层级多深，都可以注入由父组件提供给整条链路的依赖

App.vue

<template><Parent/></template><script >
import Parent from "./components/Parent.vue"export default{provide:{messages:"app组件"},}
</script>

Parent.vue

<template><h3>Parent</h3><Child></Child></template>

Child.vue

<template>Child
<p>{{ messages }}</p>
</template><script>
export default{inject:["messages"],}
</script>

效果

动态穿透

<template><Parent/></template><script >import Parent from "./components/Parent.vue"
provide(){return{messages: this.messages}},data(){return{messages:"app组件"}},
</script>

全局数据

app.provide("golabData","全局数据")

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

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

相关文章

android studio使用总结

android studio使用总结

gradle是项目构建的工具&#xff0c;在gradle-wrapper.properties这个文件中设置&#xff0c; 然后就会下载相应版本的安装包到这个路径C:\Users\ly.gradle\wrapper\dists&#xff0c;例如这里是7.0.2&#xff0c; gradle和studio中的jdk版本需要对应&#xff0c;否则无法构建项…
阅读更多...
khbc靶场小记（upload 666靶场）

khbc靶场小记（upload 666靶场）

尝试上传正常的png jpg gif php的格式的文件发现老是提示烦人的消息&#xff08;上传不成功&#xff09;&#xff1b; 通过抓包对MIME进行爆破没爆出来&#xff0c;当时可能用成小字典了&#xff1b; 猜测可能是把后缀名和MIME绑定检测了&#xff1b; 反正也没思路&#xff0c;…
阅读更多...
lombok引发的血案

lombok引发的血案

一直以为lombok是一个无比牛叉的省代码工具&#xff0c;感觉再也不用&#xff0c;好爽&#xff1b; 然而lombok再给我们带来便利的同时&#xff0c;却有可能悄无声息的带来各种代码问题&#xff1b; 今天笔主就遇到了一个引发生产事故的bug&#xff1b; 我们在开发后端项目时…
阅读更多...
C++核心编程之通过类和对象的思想对文件进行操作

C++核心编程之通过类和对象的思想对文件进行操作

目录 ​​​​​​​一、文件操作 1. 文件类型分类&#xff1a; 2. 操作文件的三大类 二、文本文件 1.写文件 2.读文件 三、二进制文件 1.写二进制文件 2.读二进制文件 一、文件操作 程序运行时产生的数据都属于临时数据,程序一旦运行结束都会被释放 通过文件可以将…
阅读更多...
qt.qpa.plugin: Could not find the Qt platform plugin “windows“ in ““

qt.qpa.plugin: Could not find the Qt platform plugin “windows“ in ““

系统环境&#xff1a;Win10家庭中文版 Qt : 5.12.9 链接了一些64位的第三方库&#xff0c;程序编译完运行后出现 qt.qpa.plugin: Could not find the Qt platform plugin "windows" in "" 弹窗如下&#xff1a; 网上搜了一些都是关于pyQt的&#xff0c…
阅读更多...
.Net Core 使用 AspNetCoreRateLimit 实现限流

.Net Core 使用 AspNetCoreRateLimit 实现限流

上一篇文章介绍过ASP.NET Core 的 Web Api 实现限流 中间件-CSDN博客 使用.NET 7 自带的中间件 Microsoft.AspNetCore.RateLimiting 可以实现简单的Api限流&#xff0c;但是这个.NET 7以后才集成的中间件&#xff0c;如果你使用的是早期版本的.NET&#xff0c;可以使用第三方库…
阅读更多...
10个用于Android开发的有用的Kotlin库及示例

10个用于Android开发的有用的Kotlin库及示例

10个用于Android开发的有用的Kotlin库及示例 在Android开发领域&#xff0c;Kotlin已成为一门领先的语言&#xff0c;带来了现代语法和功能的浪潮。随着Kotlin的崛起&#xff0c;涌现出了许多专为其定制的库&#xff0c;进一步增强了开发体验。本文将深入介绍其中的10个库&…
阅读更多...
C#中的文件操作

C#中的文件操作

为什么要对文件进行操作&#xff1f; 在计算机当中&#xff0c;数据是二进制的形式存在的&#xff0c;文件则是用于存储这些数据的单位&#xff0c;因此在需要操作计算机中的数据时&#xff0c;需要对文件进行操作。 在程序开发过程中&#xff0c;操作变量和常量的时候&#…
阅读更多...
Dockerfile镜像实战

Dockerfile镜像实战

目录 一 构建SSH镜像 1.开启ip转发功能 2. 准备工作目录 3.修改配置文件 5.启动容器并修改root密码 二 构建Systemctl镜像 1. 准备工作目录 ​编辑2.修改配置文件 3.生成镜像 4.启动容器&#xff0c;并挂载宿主机目录挂载到容器中&#xff0c;进行初始化 5.进入容器 三…
阅读更多...
Elasticsearch各种高级文档操作2

Elasticsearch各种高级文档操作2

本文来记录下Elasticsearch各种文档操作 文章目录 初始化文档数据 初始化文档数据 在进行各种文档操作之前&#xff0c;我们先进行初始化文档数据的工作
阅读更多...
MyBatisPlus学习笔记四-扩展功能

MyBatisPlus学习笔记四-扩展功能

1、代码生成器 1.1、官方的1 1.3、官方的2-idea插件 1.3、非官方的-idea插件 2、静态工具 先查询&#xff0c;再分组 3、逻辑删除 4、枚举处理器 5、JSON处理器
阅读更多...
Docker之安装Nginx

Docker之安装Nginx

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是君易--鑨&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的博客专栏《Docker之Dockerfile构建镜像》。&#x1f3af;&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023