通过Component来自定义组件的名称和样式，说的通俗一点，其实就是相当于把页面上公共的部分单独写一下，用的时候直接拿出来。举个例子：网页上的导航栏
v-for="item in items":遍历Vue实例中定义的名为items 的数组，并创建同等数量的组件
v-bind:zkw="item":将遍历的item 项绑定到组件中props 定义的名为zkw属性上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件学习</title>
</head>
<body>
<div id="app">
<!--1.xw就是自定义组件的名字。使用v-for遍历出数组的每个元素赋值到item上，
然后通过v-bind将item上的值给到zkw上-->
<xw v-for="item in items" v-bind:zkw="item"></xw>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
//定义一个组件，其实这个当组件，就相于页面上公共的部分，比如导航栏
Vue.component("xw",{
//2.然后通过使用props将值接收到，最后显示在组件中
props:["zkw"],
template:" <ul>" +
" <li>{
{zkw}}</li>\n" +
" </ul>"
});
var vm = new Vue({
el: "#app",
data: {
items:["数据结构","linux","Java"]
}
});
</script>
</body>
</html>
结果如下
