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属性里面的值不能为大写
