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>
運行結果：
