vue3.0的组件怎么使用,有什么作用?

组件,是封装和复用性的体现。封装,将尽量少的细节暴露给外界;复用,在保证整体功能的情况下通过一些方式提供灵活性、可变性。这些设计指导原则可以让我们在程序开发的过程中,写出组织良好,可维护性比较高的代码。

组件的属性就是这样一种方式,可以让组件和外部(其他组件)之间进行有限的沟通,同时也让组件拥有了可配置性。使用过Vue2.x的朋友一定对组件的属性非常熟悉,其实Vue3.0的属性用法和Vue2.x的差不多。

仍以之前的计数器例子为基础,为它添加一些属性相关的功能:我们希望在创建计数器的时候,可以设置它初始计数值,然后后续的点击计数基于这个初始值进行累加,而不是从0开始累加。

1. 弹框组件

vue3.0的组件怎么使用,有什么作用?_第1张图片

我在这里面写了两个弹框

弹框1是用户名登录的

弹框2是一个展示页面

打开浏览器看一下效果

vue3.0的组件怎么使用,有什么作用?_第2张图片

看一下弹框1

vue3.0的组件怎么使用,有什么作用?_第3张图片

再看一下弹框2

vue3.0的组件怎么使用,有什么作用?_第4张图片

 2.幻灯片

vue3.0的组件怎么使用,有什么作用?_第5张图片

我这边在里面写了一个按钮 点击的时候显示和隐藏

vue3.0的组件怎么使用,有什么作用?_第6张图片vue3.0的组件怎么使用,有什么作用?_第7张图片

 3.组件的插槽

默认情况下不能在子组件标签中额外(不是子组件的