Vue:子组件接收不到父组件所传的值(v-bind)
一个很基础的父组件向子组件传值:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta ht...
·
一个很基础的父组件向子组件传值:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<chil :parentMsg="msg"></chil>
</div>
<template id="chil">
<div>
<h4>I'm child element! {{ parentMsg }} </h4>
</div>
</template>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var chil = {
template:'#chil',
props:['parentMsg'],
data(){
return {}
},
methods: {},
}
var Vm = new Vue({
el:'#app',
data(){
return {
msg:'P,I have a pen,I have an apple.Ang,ApplePen!'
}
},
methods: {},
components:{
chil
}
})
</script>
</html>
此时页面渲染出:I'm child element!
但是通过v-bind绑定的parentMsg,子组件却没有接收到,出现的原因是:驼峰写法!
Html中是不区分大小写的,所以v-bind下的parentMsg===parentmsg,而js内的props中是区分大小写的,这样子组件中,本应该接收的应该是parentmsg,所以接收不到父组件所传的值,均改为小写模式,就可以解决这个问题。
巴拉巴拉:
更多推荐
已为社区贡献13条内容
所有评论(0)