我们经常使用驼峰模式,然而在vue之中,驼峰就不见得那么好用了举个例子
父组件向子组件传递属性的例子
错误写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
//父子传值使用v-bing绑定属性的时候使用驼峰模式
<cpn :cMives="movies"></cpn>
</div>
<!-- 子组件的模板(分离式写法) -->
<template id="cpn">
<div>
{{cMives}}
</div>
</template>
<script src="../vue.js/vue.js"></script>
<script>
//子组件
const cpn= {
template: '#cpn',
props:['cMives'],
}
//父组件
const app=new Vue({
el: '#app',
data:{
message: '你喜欢',
movies:['海贼王','火影','海尔']
},
components :{
cpn
}
})
</script>
</body>
</html>
谷歌没报错,但也没有传递对应的属性值
正确写法(绑定属性的时候,把 cMives —> 变成 c-mives)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 使用驼峰模式绑定属性的时候,不能写cMives,会接收不到属性,必须写成c-mives -->
<!--c-mives:子组件接收属性的变量 movies:父组件的属性的变量 -->
<cpn :c-mives="movies"></cpn>
</div>
<!-- 子组件的模板(分离式写法) -->
<template id="cpn">
<div>
{{cMives}}
</div>
</template>
<script src="../vue.js/vue.js"></script>
<script>
//子组件
const cpn= {
template: '#cpn',
props:['cMives'],
}
//父组件
const app=new Vue({
el: '#app',
data:{
message: '你喜欢',
movies:['海贼王','火影','海尔']
},
components :{
cpn
}
})
</script>
</body>
</html>
改正之后,浏览器显示对应的数据