Component 组件props 属性设置
所谓组件就是自定义一个标签,设置标签里面的属性。
props选项就是设置和获取标签上的属性值的,例如我们有一个自定义的组件,这时我们想给他加个标签属性写成 意思就是熊猫来自中国,当然这里的China可以换成任何值。定义属性的选项是props。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>component-2</title>
</head>
<body>
<h1>component-2</h1>
<hr>
<div id="app">
<panda here="China"></panda>
</div>
<div id="app2">
<panda v-bind:here="message"></panda>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
components:{
"panda":{//定义一个局部组件
template:`<div style="color:red;">Panda from {{ here }}.</div>`,
props:['here']//为组件定义一个属性here
//我们在写属性时经常会加入’-‘来进行分词,
// 比如:,那这时我们在props里如果写成props:[‘form-here’]是错误的,
// 我们必须用小驼峰式写法props:[‘formHere’]。
}
}
})
//使用v-bind指令获取数据
var app2=new Vue({
el:'#app2',
data:{
message:'SiChuan=='
},
components:{
"panda":{
template:`<div style="color:red;">Panda from {{ here }}.</div>`,
props:['here']
}
}
})
</script>
</body>
</html>