【vue】单文件组件、组件的属性

单文件组件

基本语法

1. 每个组件都是一个后缀名为.vue的文件
2. 每个组件内部都可以有 template、script、style 三个定义区域
3. 可以style标签中加入 scoped 属性设置样式私有

示例：

<template>
    <div>
        <!-- 模板区域 -->
    </div>
</template>
<script>
// js区域
export default {
  
}
</script>
<style>
/* 样式区域 */
</style>

其他文件使用单文件组件：

import box from "@/components/box.vue"

单文件组件的技术点：
1.在项目下创建vue.config.js 就是vue的打包配置文件:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false//关闭eslint的严格模式检测
})

2.引入文件时 @代表了src目录的意思 这个@是vue的脚手架集成的basepath 其他框架中没有@不要记混乱了

3.注册的组件名不能跟vue中的和原生DOM的重名,注册的名字是驼峰 使用时就用连字符

4.注册的组件 使用时可以用双标签也可以用单标签: 如果有插槽必须用双标签
5.如果.vue的script注释了 在打包的时候 vue的打包环境 会帮我们把这个文件解析为一个对象 然后给这个对象添加一个template属性 值为解析的template页面模板字符串
也就是说 .vue文件中 可以不要

6.style可以写多个

7.每一个组件内部只能有一个根元素 不要在根元素上写v-for 循环超过2次就会出现多个根元素

组件的属性

• 属性可以多传 但是注册了的属性就必须传 不然有可能会在使用时因为取值问题出BUG
• 属性名不要(不是不能)用vue官方或者原生标签已经签名过的名字:比如id class href
• 属性的类型验证只是一种验证提示 不会阻止程序运行

props来接收其他文件传过来的值

<script>
export default {
    //props可以传多个参数
     props:["title","price"]
}
</script>

传值的写法

    <!-- 组件传值 -->
    <!-- “title”属于字符串 有属性绑定是变量 -->
    <BoxDiv2 pro="title"></BoxDiv2>
    <!-- title属于变量 -->
    <BoxDiv2 :pro="title"></BoxDiv2>

组件属性的类型验证

props: {
	propA: Number,		// 基础的类型检查 (`null` 匹配任何类型)
	propB: [String, Number],	// 多个可能的类型
	propC: {	type: String,
     		 required: true	// 必填的字符串
   	},
	propD: {	type: Number,
      		default: 100	// 带有默认值的数字
    	},
	propE: {	type: Object,	// 带有默认值的对象或者数组填Array
		default: function () {	// 不建议直接填对象(因为对象直接量会一直占用内存),一般使用工厂函数,调用时才创建对象节省资源(面试)
        		return { message: 'hello' }
      		}
    	},
	propF: {
      		validator: function (value) {// 自定义验证函数返回为true就代表数据符合我们规定
			return ['success', 'warning', 'danger'].indexOf(value) !== -1
      		}
    	}
  }