学习目标：
目标
- 1、了解组件的含义
- 2、了解 的含义及用法
- 3、了解 的含义及用法
- 4、了解 的含义及用法
学习内容：
内容：
-
什么是组件？
组件的出现，就是为了拆分Vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块
，将来我们需要什么功能，就可以去调用对应的组件即可。 -
组件化与模块化的不同：
模块化：是从代码逻辑的角度进行分析，方便代码分层开发，保证每个功能模块的只能单一
组件化：是从UI界面的角度进行划分，前端的组件化，方便UI组件的重用。
- components和component的区别？
components ，它的意思是组件；component，它的意思是组成部分，俩者不一样，使用的位置也不同。
<component>
<script>
// Component 组件的创建
// 第一种创建全局组件
// extend是注册组件函数，他返回一个对象
var comobj= Vue.extend({
template:"<h1>我是全局组件</h1>"
})
// component函数提交组件，第一个参数为组件的名称，第二个参数是一个注册组件的对象
Vue.component("login",comobj)
// 第二种创建方式
// component 中直接写上一个模板对象
Vue.component('login2',{template:'<h1>第二种创建组件的方式</h1>'});
// 第三种创建的方式 首先在元素中创建一个template模板
Vue.component('login3',{template:'#login3'})
var vm=new Vue({
el:'.app',
data:{},
// 定义私有组件 和全局差不多 组件名称和对象，也可以使用template模板来创建
components:{
login6:{template:'#login3'}
}
})
</script>
<slot>
一个在渲染函数中以编程方式使用插槽时辅助类型推断的选项。仅在 Vue 3.3+ 中支持。- 标签模板
template是组件的基本结构 ，vue规定：每个组件对应的模板结构，需要定义到节点中
注意: 是 vue提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的DOM元素。
其中模板只能包含一个父节点，也就是说顶层的div只能有一个。
知识总结：
小结：
- 1、每个.vue组件都由3部分构成，分别是:
template ->组件的模板结构
script ->组件的JavaScript行为
style ->组件的样式
其中，每个组件中必须包含template模板结构，而script行为和style样式是可选的组成部分。
-
2.、Component（组件）：
- 组件是可复用的代码块，用于构建用户界面。一个组件通常包含了一段具有特定功能的代码、样式和模板。
- 组件的作用类似于现实世界中的组件，比如按钮、表单、导航栏等。在一个应用程序中，可以由许多组件组成，每个组件负责一个特定的功能或界面部分。
- 一个组件通常由以下几部分组成：
- 模板（Template）：定义了组件的结构和布局，通常使用HTML和模板语法来描述。
- 数据（Data）：组件可以接受输入的数据，这些数据通常存储在组件的状态中，并且可以在模板中进行绑定和渲染。
- 行为（Behavior）：定义了组件的交互行为和逻辑，通常以JavaScript的形式提供。
- 样式（Style）：定义了组件的外观和样式，通常使用CSS来描述。
-
3.、. Slot（插槽）：
- 插槽是一种用于组件之间通信的机制，允许父组件向子组件传递内容。
- 插槽可以理解为组件的一个占位符，可以在组件的模板中定义，并且允许父组件在使用该组件时向其中插入内容。
- 使用插槽的目的是使组件更具灵活性和可复用性，因为它使得组件可以接受不同的内容，而不需要对组件的结构进行修改。
- 插槽通常用于父子组件之间的通信，允许父组件向子组件传递内容，以实现更灵活的布局和组合。
-
4.、 Template（模板）：
- 模板是定义用户界面结构和布局的一种方式，通常使用HTML和模板语法来描述。
- 在现代的前端开发中，模板通常与组件结合使用，每个组件都有自己的模板来定义其结构和布局。
- 模板中可以包含HTML标记、模板语法（如条件语句、循环语句等）、组件和插槽等内容，以描述页面的结构和行为。
综上所述，"component"是构建用户界面的基本单元，包含了模板、数据、行为和样式；
"slot"是用于组件之间通信的机制，允许父组件向子组件传递内容；
"template"是定义用户界面结构和布局的一种方式，通常与组件结合使用来描述组件的结构和行为。
