TodoList组件的拆分
前端开发中，经常提到的组件，对ToduList进行组件的拆分
组件的概念：指的是页面上的某一部分
当我们做的网页十分庞大的时候，我们可以把一个大型的网页，拆成几个部分，每个部分就是小的组件。这样一个大型项目就被细化为小型组件,每个组件相对维护就比较简单
- 要学习组件化的开发，要知道如何去定义一个组件?
- 组件和组件之间如何做通信?
- 如何拆分？
li标签实际上一个基本的todoitem,也就是里面描述了我到底要干什么？小的项目，这个小的项目它会不断的出现。
但是有可能后续展示形式变的非常复杂，假设它的dom无比复杂，ul标签里面的内容就会越来越庞大。当它庞大到一定程度的时候，我们就可以把它拆分成一个组件。
- 全局组件
通过Vue.conponent定义的组件叫做全局组件，直接在任何地方通过模板<todo-item>都可以使用这个组件。
- 局部组件
通过下面的形式定义的组件称为局部组件，如果想在其他Vue实例里面使用局部组件，需要在Vue实例里面对components进行注册。
var TodoTtem = {
template: '<li>item<li>'
}components: {
'todo-item': TodoTtem
}在Vue实例里面要使用ToDoItem局部组件，通过todo-item标签来使用，当注册好局部组件ToDoItem，在实例的模板里面使< todo-item>标签，就可以正确使用局部组件
当我们定义局部组件的时候，直接在父组件的内部调用子组件
需要做一个组价的声明
删除掉局部组件，使用全局组件，继续编辑代码
现在虽然外层，向组件里面传递了content,但是组件并不能直接使用content
外层向todo-item里面传递了content这个属性，组件必须接受这个属性
在todo-item小组件里，定义props属性，值可以是一个数组
意思是：todo-item小组件，接收从外部传递进来一个名字为“content”的属性。
一旦外部进行传递之后，组件里面就可以直接使用传递进来的参数
完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue学习</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleClick">提交</button>
</div>
<ul>
<todo-item v-for="(item,index) of list"
:key="index"
:content="item"
>
</todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
props: ['content'],
template: '<li>{{content}}<li>'
})
new Vue({
el: "#root",
data:{
inputValue: '',
list: []
},
methods: {
handleClick: function () {
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
</script>
</body>
</html>
总结：把<li>标签拆成一个小组件进行管理，在Vue实例的模板之中，就可以使用组件
上一篇： Python学习第十四周作业——综合练习
下一篇： 那一顿混合双打，老厉害了