接上一篇：（vue基础试炼_03）使用vue.js实现TodoLis
指令 | 说明 |
v-bind | 传入绑定值 |
文章目录
- 一、前端页面组件化
- 二、全局组件学习
- 三、局部组件学习
一、前端页面组件化
页面组件化：
简单理解就是一个页面可以划分成几个区域，一个区域就可以看作是一个组件，那整个页面就相当于有很多组件拼接而成的，就像拼积木一样，这样，每个组件是细致的，也是容易维护的。
在TodoList例子中，列表就可以看作是一个组件。
以前列表项是通过li标签来显示的
<li v-for="item in list">{{item}}</li>二、全局组件学习
下面把li标签中的内容整体变成一个组件
在script标签里面，我们调用一个Vue.component全局组件，在组件中定义模板和我们需要接收的参数的值，通过插值表达式渲染到页面进行展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用组件改造TodoList</title>
<!--引入vue.js库-->
<script src="vue.js"></script>
</head>
<body>
<!--vue接管的div-->
<div id="app">
<div>
<input type="text" v-model="inputValue">
<button v-on:click="handleBtnClick">提交</button>
</div>
<ul>
<todo-item v-bind:content="item"
v-for="item in list">
</todo-item>
</ul>
</div>
<script>
Vue.component("TodoItem", {
props: ['content'],
template: "<li>{{content}}</li>"
});
/*创建了一个vue实例*/
var app = new Vue({
el: '#app',
data: {
list: [],
inputValue: ''
},
methods: {
handleBtnClick: function () {
this.list.push(this.inputValue)
this.inputValue = ''
}
}
});
</script>
</body>
</html>
我们把list循环出的每一个值都赋值给item，然后，再把item通过v-bind指令传给todo-item标签，怎么传呢？通过content这个变量来传递。
子组件(todo-item)传递值给父组件，那父组件如何接收呢？
在父组件中添加 props: ['content'],来接收子组件传递过来的参数内容。
这样的话子组件中就可以接收外部传递过来content参数值，而content的值就是item，而item就是list通过循环出来的每一项，所以，子组件就接收到了list数组中的每一项的值item。
子组件接收到的content值，需要在模板(template)li标签中通过插值表达式，渲染出来展示到页面中。
梳理逻辑：
首先我定义了一个组件叫TodoItem，然后呢，这是一个全局的组件，直接可以在我们的模板中使用这个组件todo-item，怎样使用这个组件呢？
我们通过list来决定到底循环多少个todo-item这个组件，同时，把每一个list的每一项的内容，通过v-bind的语法借助content这个变量，擦混递给了todo-item这个组件，而如果你想使用父组件传递过来的数据，需要在props中对content进行接收，接收完成后，我们的模板中用到了content，然后组件就会将这个content渲染出来。
三、局部组件学习
使用局部组件实现上面案例
序号 | 说明 |
① | 创建一个局部组件 |
② | 将局部组件以对象的形式在Vue实例的components里面进行注册即可 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用组件改造TodoList</title>
<!--引入vue.js库-->
<script src="vue.js"></script>
</head>
<body>
<!--vue接管的div-->
<div id="app">
<div>
<input type="text" v-model="inputValue">
<button v-on:click="handleBtnClick">提交</button>
</div>
<ul>
<todo-item v-bind:content="item"
v-for="item in list">
</todo-item>
</ul>
</div>
<script>
/*创建一个局部组件 TodoItem*/
var TodoItem = {
props: ['content'],
template: "<li>{{content}}</li>"
}
/*创建了一个vue实例*/
var app = new Vue({
el: '#app',
/*通过对象来注册局部组件TodoItem*/
components: {
TodoItem: TodoItem
},
data: {
list: [],
inputValue: ''
},
methods: {
handleBtnClick: function () {
this.list.push(this.inputValue)
this.inputValue = ''
}
}
});
</script>
</body>
</html>
下一篇：（vue基础试炼_05）简单组件之间的传值
