父组件向子组件传值时props属性名规则:
- 在props中使用驼峰形式,模板中需要使用短横线得形式
- 字符串形式得模板中没有这个限制
<body>
<div id="app">
<div>{{pmsg}}</div>
<menu-item :menu-title='ptitle'></menu-item>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
父组件向子组件传值-props属性名规则
*/
Vue.component('third-com', {
props: ['testTile'],
template: '<div>{{testTile}}</div>'
});
Vue.component('menu-item', {
props: ['menuTitle'],
template: '<div>{{menuTitle}}<third-com testTile="hello"></third-com></div>'
});
var vm = new Vue({
el: '#app',
data: {
pmsg: '父组件中内容',
ptitle: '动态绑定属性'
}
});
</script>
</body>
结果:
props属性值类型绑定有什么区别:
<body>
<div id="app">
<div>{{psmg}}</div>
<menu-item :pstr='pstr' pnum='12' pboo='true'></menu-item>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
//组件注册
Vue.component('menu-item',{
props:['pstr','pnum','pboo'],
template:`
<div>
<div>{{pstr}}</div>
<div>{{pnum}}</div>
</div>
`
});
var vm = new Vue({
el:'#app',
data:{
psmg:'父组件得内容',
pstr:'hello'
}
});
</script>
</body>
结果:
注:
- 子组件是字符串模板时,template使用得是倒引号
- 子组件中props属性如果是数字,加冒号时属性为number类型可以进行数值计算,而不加冒号时则是string类型