＜component＞＜slot＞＜template＞三者之间的区别与使用

最新推荐文章于 2025-09-17 20:24:19 发布

努力学编程呀(๑•ี_เ•ี๑)

最新推荐文章于 2025-09-17 20:24:19 发布

阅读量1.3k

点赞数 10

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/YHLSunshine/article/details/132196691

本文详细介绍了Vue中的组件概念，包括组件化与模块化的区别，components和component的区别，以及组件的构成（template、script、style），同时阐述了插槽（slot）在组件间通信中的作用。

学习目标：

目标

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标记、模板语法（如条件语句、循环语句等）、组件和插槽等内容，以描述页面的结构和行为。