Vue的组件

目录

组件

分类

非单文件组件：

单文件组件：

组件名

组件标签

使用

---

 

组件

局部功能代码和资源的集合。

分类

非单文件组件：

一个文件中包含有n个组件。

单文件组件：

一个文件中只包含有一个组件。

组件名

一个单词组成：
           第一种写法(首字母小写)：school
           第二种写法(首字母大写)：School
多个单词组成：
           第一种写法(kebab-case命名)：my-school
           第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
 备注：
            (1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
            (2).可以使用name配置项指定组件在开发者工具中呈现的名字。

组件标签

关于组件标签:
         第一种写法：<school></school>
         第二种写法：<school/>
备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。

使用

单文件组件使用示例（使用脚手架）：

1. 创建组件

<template>
  <div>
      <h2>学校名称：{{name}}</h2>
      <h2>学校地址：{{address}}</h2>
  </div>
</template>

<script>
export default {
    name:"School",
    data() {
        return {
            name:'尚硅谷',
            address:'重庆'
        }
    },
}
</script>

<style scoped>
    div{
        background-color: aqua;
    }
</style>

 2. 引用组件

// 在要调用组件的父组件中调用

export default {
    name: 'App',
     components:{
      School,Student
    }
    
  }

3. 使用标签

<div id="root">
    <school/>
    <student/>
  </div>

4. 效果展示

 

---