所谓组件化思想，顾名思义就是化繁为简，把一个整体拆成多个模块，一个模块为一个组件来实现。
全局组件:使用Vue.component("组件名",{
props:['属性名'],
template:'html模板'
});如下图
源码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全局组件</title>
<script src="vue.js"></script>
</head>
<body>
<div id = 'app2'>
<input type='text' v-model='inputVal'/>
<button @click='addToList'>提交</button>
<ul >
<todo-item v-bind:con1="item" v-for="item in list"></todo-item>
</ul>
</div>
<script>
Vue.component("TodoItem",{
props:['con1'],
template:'<li>{{con1}}</li>'
});
var app = new Vue({
el:'#app2',
data:{
list:[],
inputVal : ''
},
methods:{
addToList:function(){
this.$data.list.push(this.inputVal);
this.inputVal = '';
}
}
});
</script>
</body>
</html>
局部组件，如下图，对比上面全局组件看看啥差别,个人喜欢用全局组件
源码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>局部组件</title>
<script src="vue.js"></script>
</head>
<body>
<div id = 'app2'>
<input type='text' v-model='inputVal'/>
<button @click='addToList'>提交</button>
<ul >
<com v-bind:con1="item" v-for="item in list"></com>
</ul>
</div>
<script>
var com = {
props:['con1'],
template:'<li>{{con1}}</li>'
};
var app = new Vue({
el:'#app2',
data:{
list:[],
inputVal : ''
},
components:{
com:com
},
methods:{
addToList:function(){
this.$data.list.push(this.inputVal);
this.inputVal = '';
}
}
});
</script>
</body>
</html>