Vue.component()
使用Vue.component()方法注冊組件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>組件</title>
</head>
<body>
<div id="app">
<ul>
<diy-li></diy-li>
</ul>
</div>
<!--導入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
Vue.component("diy-li",{
template: '<li>自定義的li的內容</li>'
});
var vm = new Vue({
el: "#app"
});
</script>
</body>
</html>
-
diy-li自定義組件的名字 -
template組件的模板
使用props屬性傳遞參數
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>組件</title>
</head>
<body>
<div id="app">
<ul>
<diy-li v-for="item in items" v-bind:item="item"></diy-li>
</ul>
</div>
<!--導入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
Vue.component("diy-li",{
props: ['item'],
template: '<li>{{item}}</li>'
});
var vm = new Vue({
el: "#app",
data:{
items: ["吃飯","睡覺","工作"]
}
});
</script>
</body>
</html>
-
v-for="item in items":遍歷Vue實例中定義的名為items的數組，并創建同等數量的組件 -
v-bind:item=item:將遍歷的item項綁定到組件中props定義的名為item屬性上；=號左邊的item為props定義的屬性名，右邊的item in items中遍歷item項的值
默認規則下props屬性里面的值不能為大寫
