Vue全局API
1.Vue中component组件props属性设置
在Vue中利用component自定义组件时,利用props选项进行设置和获取标签上的属性值。
这时我们自定义一个component组件,其名为 ‘liu’ ,设置一个属性值:demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>component02中props属性</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>这是component组件的props属性</h1>
<div class="app">
<liu demo="落霞与孤鹜齐飞"></liu>
</div>
<script type="text/javascript">
var test=new Vue({
el:'.app',
data:{
messages:'这是数据测试'
},
components:{
'liu':{
template:`<p style="color:green">这是component中的props属性: {{ demo }}</p>`,
props:['demo']
}
}
})
</script>
</body>
</html>
运行结果:
注意:
1.在component组件自定义属性时,需要在构造器里面对其进行挂载,利用props选项进行挂载,其后面跟着的是一个数组,如:props:[‘属性名1’,‘属性名2’]
2.在template选项中,在组件的模板里读出属性值只需要用插值的形式
template:`<p style="color:green">这是component中的props属性: {{ demo }}</p>`
2.当属性中带“-”时,props对其进行挂载的方式
当属性中带有“-”时,props对其进行挂载时采用的是小驼峰命名的方法,第二个单词的首字母大写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>component02中props属性</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>这是component组件的props属性</h1>
<div class="app">
<liu list-demo="秋水共长天一色"></liu>
</div>
<script type="text/javascript">
var test=new Vue({
el:'.app',
data:{
messages:'这是数据测试'
},
components:{
'liu':{
template:`<p style="color:green">这是component中的props属性: {{ listDemo }}</p>`,
props:['listDemo']
}
}
})
</script>
</body>
</html>
运行结果:
3.在构造器里向组件传值
当组件中属性值是引用data里面的数据时,需要利用v-bind进行数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>component02中props属性</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>这是component组件的props属性</h1>
<div class="app">
<liu v-bind:list-demo="messages"></liu>
</div>
<script type="text/javascript">
var test=new Vue({
el:'.app',
data:{
messages:'落霞与孤鹜齐飞,秋水共长天一色'
},
components:{
'liu':{
template:`<p style="color:green">这是component中的props属性: {{ listDemo }}</p>`,
props:['listDemo']
}
}
})
</script>
</body>
</html>
运行结果: