1. 对于单个单词的组件
方式一:首字母大写。如 <School></School>。在 vue 开发者工具中默认使用的是该种方式。
方式二: 首字母小写。如 <school></school>
2. 对于多个单词的组件
方式一:每个单词都是小写,单词之间用短横线连接。如 my-school, 在注册组件时,需要将 my-school 用引号包裹起来。在 vue 开发者工具中会自动转换成大驼峰,即 <MySchool />
方式二:使用大驼峰,每个单词之间大写。如 <MySchool> 。值得一提的是,这种方式需要运用在脚手架中,否则会报错。
注意:
1. 这种 <MySchool /> 自闭合标签需要在脚手架中使用,否则后续会导致组件不能渲染。
2. 使用 name 配置项可以指定组件在开发者工具中呈现的名字。
3. 组件要避免使用 HTML 标签,大小写都不行,否则会报错。如 H2 SPAN
3. 子组件接收参数命名
子组件接收父组件的参数需要使用 props 接收。有以下两种方式声明接收
方式一:小驼峰。如 mySchool
方式二:每个单词小写,使用短横线连接。如 my-school
//父组件调用
<PageTools my-name="张三"></PageTools>
//子组件内接收
//写法1
props: {
myName: {
type: String,
default: ''
}
}
//写法2
props: {
'my-name': {
type: String,
default: ''
}
}