手拉手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","全局数据")

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

IaC基础设施即代码：Terraform 连接 aws S3 实现多资源管理

IaC基础设施即代码：Terraform 连接 aws S3 实现多资源管理

目录 一、实验 1.环境 2.aws 亚马逊云创建用户 3.Windows使用Terraform 初始化 aws provider 4.Windows使用Terraform 创建S3存储资源 &#xff08;对象存储&#xff09; 5.Windows使用Terraform 创建Dynamo DB资源 &#xff08;表格存储&#xff09; 6.Windows给Terrafo…
阅读更多...
Skywalking链路追踪

Skywalking链路追踪

目录 一、简介1.1、APM系统1.2、SkyWalking 简介 二、快速入门2.1、下载、启动2.2、界面认识 三、持久化存储四、告警通知五、自定义追踪-细粒度追踪service方法 一、简介 1.1、APM系统 APM&#xff08;Application Performance Monitoring&#xff09;系统是一种用于监控和管…
阅读更多...
《Redis:NoSQL演进之路与Redis深度实践解析》

《Redis:NoSQL演进之路与Redis深度实践解析》

文章目录 关于NoSQL为什么引入NoSQL1、单机MySQL单机年代的数据库瓶颈 2、Memcached&#xff08;缓存&#xff09; MySQL 垂直拆分 &#xff08;读写分离&#xff09;3、分库分表水平拆分MySQL集群4、如今的网络架构5、总结 NoSQL的定义NoSQL的分类 Redis入门Redis能干嘛&…
阅读更多...
AI教我学编程之C#类的基本概念（1）

AI教我学编程之C#类的基本概念（1）

前言 在AI教我学编程之C#类型 中&#xff0c;我们学习了C#类型的的基础知识&#xff0c;而类正是类型的一种. 目录 区分类和类型 什么是类&#xff1f; 对话AI 追问 实操 追踪属性的使用 AI登场 逐步推进 提出疑问 药不能停 终于实现 探索事件的使用 异步/交互操作 耗时操…
阅读更多...
IO网络4.0

IO网络4.0

思维导图 tftp上传 #include <myhead.h>#define ERR_LOG(msg) do{\perror(msg);\printf("%d %s %s\n", __LINE__, __func__, __FILE__);\ }while(0)#define PORT 69 #define N 516int do_upload(int sfd, struct sockaddr_in sin);int main(int a…
阅读更多...
k8s的对外服务ingress

k8s的对外服务ingress

1、service的作用体现在两个方面 &#xff08;1&#xff09;集群内部&#xff1a;不断跟踪pod的变化&#xff0c;更新deployment中的pod对象&#xff0c;基于pod的ip地址不断变化的一种服务发现机制 &#xff08;2&#xff09;集群外部&#xff1a;类似于负载均衡器&#xff…
阅读更多...
PuTTY的ppk密钥与OpenSSH密钥之间的相互转换

PuTTY的ppk密钥与OpenSSH密钥之间的相互转换

几个概念说明&#xff1a;id_rsa、id_rsa.pub、ppk、pem 目前有两个主流的密钥格式&#xff1a;OpenSSH格式的密钥 和 PuTTY格式的密钥。 id_rsa和id_rsa.pub 都是OpenSSH格式的密钥。 id_rsa是OpenSSH格式的SSH私钥。 id_rsa.pub是OpenSSH格式的SSH公钥。ppk文件 ppk文件是P…
阅读更多...
机器视觉系统在汽车车轮毂检测上的应用

机器视觉系统在汽车车轮毂检测上的应用

将机器视觉用于轮毂检测&#xff0c;可以利用图像分析的方法来测量轮毂特征尺寸、判断轮毂形状&#xff0c;并获取其位置坐标等信息&#xff0c;从而能够辨识流水生产线上的各种款式和型号的汽车轮毂。 市面上对汽车车轮毂具体检测要求如下 &#xff1a; 1.为了分辨流水线上…
阅读更多...
HTTPS：如何确保您的网站数据传输安全？

HTTPS：如何确保您的网站数据传输安全？

目录 博客前言 一.HTTPS 1.1 HTTPS简介 1.2 HTTP和HTTPS区别 1.3 TLS/SSL协议工作原理 1.3.1 TLS/SSL协议结构 1.3.2 SSL/TLS握手协议建立连接过程 1.2.3 SSL/TLS报文分析 博客前言 以下是一个关于HTTPS协议的博客前言示例&#xff1a; 欢迎来到我的博客&#xff0c;今…
阅读更多...
2024年腾讯云轻量服务器和CVM云服务器性能如何？

2024年腾讯云轻量服务器和CVM云服务器性能如何？

腾讯云轻量服务器和云服务器有什么区别&#xff1f;为什么轻量应用服务器价格便宜&#xff1f;是因为轻量服务器CPU内存性能比云服务器CVM性能差吗&#xff1f;轻量应用服务器适合中小企业或个人开发者搭建企业官网、博客论坛、微信小程序或开发测试环境&#xff0c;云服务器CV…
阅读更多...
【面试】测试/测开(ING3)

【面试】测试/测开(ING3)

190. 栈和堆在内存管理上的区别 栈 1&#xff09; 栈是由系统自动分配和回收的内存。 2&#xff09;栈的存储地址是由高地址向低地址扩展的。 3&#xff09;栈是一个先进后出的结构。 4&#xff09;栈的空间大小是一个在编译时确定常数&#xff0c;即栈的大小是有限制的&#x…
阅读更多...
2024年回炉计划之排序算法（一）

2024年回炉计划之排序算法（一）

算法是计算机科学和信息技术中的重要领域&#xff0c;涉及到问题求解和数据处理的方法。要学习算法&#xff0c;你可能需要掌握以下一些基本知识&#xff1a; 基本数据结构&#xff1a; 了解和熟练使用各种数据结构&#xff0c;如数组、链表、栈、队列、树和图等。数据结构是算…
阅读更多...
新能源汽车智慧充电桩方案：基于视频监控的可视化智能监管平台

新能源汽车智慧充电桩方案：基于视频监控的可视化智能监管平台

一、方案概述 TSINGSEE青犀&触角云新能源汽车智慧充电桩方案围绕互联网、物联网、车联网、人工智能、视频技术、大数据、4G/5G等技术&#xff0c;结合云计算、移动支付等&#xff0c;实现充电停车一体化、充电桩与站点管理等功能&#xff0c;达到充电设备与站点的有效监控…
阅读更多...
【汇编】实验12 编写0号中断的处理程序

【汇编】实验12 编写0号中断的处理程序

记录一下代码 assume cs:code code segment start:mov ax,csmov ds,axmov si,offset do0mov ax,0mov es,axmov di,200hmov cx,offset do0end-offset do0cldrep movsb ;将ds:si的字节单元byte送入es:di&#xff0c;也就是将从do0处往下的指令复制到0:200h中。mov word ptr es:[…
阅读更多...
阿赵UE学习笔记——11、地形系统

阿赵UE学习笔记——11、地形系统

阿赵UE学习笔记目录 大家好&#xff0c;我是阿赵。   继续学习虚幻引擎的用法&#xff0c;这次来学习一下虚幻引擎的地形系统的用法。 一、创建地形 在选项模式里面&#xff0c;选择地形&#xff1a; 进入到地形界面之后&#xff0c;需要先创建一个地形&#xff1a; 留意看…
阅读更多...
Springboot+vue的智能家居系统（有报告），Javaee项目，springboot vue前后端分离项目

Springboot+vue的智能家居系统（有报告），Javaee项目，springboot vue前后端分离项目

演示视频&#xff1a; Springbootvue的智能家居系统&#xff08;有报告&#xff09;&#xff0c;Javaee项目&#xff0c;springboot vue前后端分离项目 项目介绍&#xff1a; 本文设计了一个基于Springbootvue的前后端分离的智能家居系统&#xff0c;采用M&#xff08;model&a…
阅读更多...
【Android】为什么在子线程中更新UI不会抛出异常

【Android】为什么在子线程中更新UI不会抛出异常

转载请注明来源&#xff1a;https://blog.csdn.net/devnn/article/details/135638486 前言 众所周知&#xff0c;Android App在子线程中是不允许更新UI的&#xff0c;否则会抛出异常&#xff1a; android.view.ViewRootImpl$CalledFromWrongThreadException: Only the origin…
阅读更多...
芯片新闻-Global Semiconductor Sales Increase 5.3% Year-to-Year in November

芯片新闻-Global Semiconductor Sales Increase 5.3% Year-to-Year in November

11 月标志着一年多以来市场同比增长的第一个月&#xff1b;全球芯片销量环比增长2.9% 华盛顿——一月。 2024 年 12 月 9 日——半导体行业协会 (SIA) 今天宣布&#xff0c;2023 年 11 月全球半导体行业销售额总计 480 亿美元&#xff0c;比 2022 年 11 月的 456 亿美元总额增…
阅读更多...
rust获取本地外网ip地址的方法

rust获取本地外网ip地址的方法

大家好&#xff0c;我是get_local_info作者带剑书生&#xff0c;这里用一篇文章讲解get_local_info的使用。 get_local_info是什么&#xff1f; get_local_info是一个获取linux系统信息的rust三方库&#xff0c;并提供一些常用功能&#xff0c;目前版本0.2.4。详细介绍地址&a…
阅读更多...
大屏数据可视化的设计流程及原则

大屏数据可视化的设计流程及原则

随着数字经济的快速发展和信息化在各行业各领域的深入推进&#xff0c;可视化大屏在各行各业得到越来越广泛的应用。可视化大屏不再只是电影里奇幻的画面&#xff0c;而是被实实在在地应用在政府、商业、金融、制造、交通、城市等各个行业的业务场景中&#xff0c;切切实实地实…
阅读更多...
最新文章

Copyright @ 2022~2023