注：
在真实开发中,我们并不会用以下方式开发组件,而是采用vue-cli创建.vue模板文件的方式开发,以下方法只是为了让大家理解什么是组件。
说明：
Vue.component(): 注册组件
my-component-li: 自定义组件的名字
template: 组件的模板
使用props组件传递参数
注意：默认规则下props属性里的值不能为大写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
<!--组件：传递给组件中的值：props-->
<qinjiang v-for="item in items" v-bind:qin="item"></qinjiang>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
//定义一个vue组件component
Vue.component("qinjiang",{
props:['qin'],
template:'<li>{{qin}}</li>'
});
var vm=new Vue({
el:"#app",
data:{
items:["Java","Linux","前端"]
}
})
</script>
</body>
</html>
页面显示：
v-for="item in items": 遍历Vue实例中定义的名为items的数组,并创建同等数量的组件
v-bind:qin="item": 将遍历的item项绑定到组件中props定义的名为qin的属性上