什么是组件?如何定义一个子组件

原创于 2019-12-20 18:44:34 发布 · 2.2k 阅读

CC 4.0 BY-SA版权

文章标签：

本文详细介绍组件的概念及其在UI界面中的应用，阐述了组件的结构、行为及样式三要素，强调template单一子元素规则与data函数返回值的重要性。并提供子组件定义与使用的四步骤：创建、书写、引入与挂载。

组件是按照 ui 界面来划分小的功能单位，可以把组件分为两种基本组件功能组件
每个组件会分为三部分结构 template 行为 script 样式 style
注意：
template有且只有一个子元素
组件的 data 必须是一个函数，而且需要一个返回值 return

怎么定义一个子组件呢
1、在components中新建一个 ×××.vue （打比方是Head.vue）
2、按照规则书写 Head.vue

<template>// 结构
<script>//逻辑行为
<style>//样式

	3、在父组件中引入子组件，并且挂载子组件
	
	4、在父组件模板中引入子组件标签

在这里插入图片描述
**Head组件的内容为(我是子组件)**内容自行定义