vue3.0的组件怎么使用，有什么作用？

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

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

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

1. 弹框组件

我在这里面写了两个弹框

弹框1是用户名登录的

弹框2是一个展示页面

打开浏览器看一下效果

看一下弹框1

再看一下弹框2

 2.幻灯片

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

 3.组件的插槽

默认情况下不能在子组件标签中额外(不是子组件的<template>标签原有的)添加其他元素的，像是这样↓ 默认不行

<son><div></div></son>

但是有时候，我们希望能够动态地为组件添加内容--

使用组件插槽 ：在子组件的<template>中添加<slot>标签

• 添加插槽后，就可以添加其他元素了
• 当添加其他元素时，Vue会用这些元素替换掉整个插槽
• <slot>标签内可以设置默认数据，展示插槽未激活状态：<slot>默认数据</slot>

注意：

• 插槽可以指定名称，未指定的称为匿名插槽
• 可以设置N个插槽，若都是匿名插槽，则<son></son>之间填充的内容会显示N个
• 因此，建议只用一个插槽

具名插槽

通过设置<slot>的name属性定义插槽名，如:

<slot name="slot-one"></slot>
<slot name="slot-two"></slot>

设置插槽名后即可通过--

设置添加的元素的slot属性，指定添加的内容填充哪个插槽，如：

<son><div slot="slot-one"></div></son>

注意：默认添加的内容不会被填充到具名插槽中，只有为其指定要填充的插槽名才可以。

1. v-slot

在Vue2.6后，给出了另一种为添加的内容指定插槽的方式--在<template> 上使用v-slot指令

注意：

• 该指令只能用在<template> 上
• v-slot缩写为#

<template v-slot:插槽名>  //同其他指令，不用加引号
  <div></div>
  <div></div>
</template>

相当于用<template> 将添加的内容包裹，为其中的内容统一指定插槽。

 3.0-1   作用域插槽

1. 作用域插槽

• 默认为子组件额外添加的内容不可以使用子组件的数据，可使用作用域插槽。
• 作用域插槽作用是让父组件填充子组件插槽时能够使用子组件的数据
• 应用场景：当子组件提供数据，父组件决定如何渲染时

如何使用--

1. 在slot中通过v-bind:数据名="数据名"的形式暴露数据 给父组件
2. 在父组件中使用<template slot-scope="自定义的作用域名">接收数据
3. 在父组件的<template>添加内容<template>内通过作用域名.数据名的方式调用

或者简单一些--

1. 暴露数据
2. <template #插槽名="作用域名">接收数据(用v-slot替代slot-scope)
3. 调用数据
4. 子组件和父组件的数据同步

实现父子组件方法通信，在父组件实现一个方法，子组件数据变动时，调用该方法，将新数据作为参数传给父组件。父组件就可以为所欲为了。

 

我把知识点放在下边的图片里   大家可以参考一下