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>
运行结果：
