在写自定义属性时经常会加入’-‘来进行分词,比如:here-is,在props里必须用小驼峰式写法props:[‘hereIs’],尽量少用这种连字符的写法自定义属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- HTML 中的 attribute 名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名:即-分词的写法,在props中要使用驼峰命名法;如果使用字符串模板template:``,那么这个限制就不存在了-->
<App here="Login" here-is="Register"></App>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
}
},
components: {
"App": {
template: `
<div>
<p> This is a {{ here }} / {{ hereIs }} component </p>
</div>
`,
props: ['here','hereIs']
}
}
})
</script>
</body>
</html>