通过todolist案例学习vue中组件的概念和使用‘
1、 todolist功能开发
使用v-model、v-on（@）、v-for指令实现todolist功能
实例：
<div id="root">
<input type="text" v-model:value="inputValue">
<button @click="handleSubmit">提交</button>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data:{
inputValue: "",
list: []
} ,
methods:{
handleSubmit:function () {
this.list.push(this.inputValue);
this.inputValue="";
}
}
})
</script>
展示：
2、todolist组件拆分
组件可以扩展HTML元素，封装可重用的代码。
2.1全局组件语法：
Vue.component(tagName,options)
tagName为组件名，options为配置选项。可以使用以下方法调用组件
<tagName></tagName>。
实例：
下例中用到了prop属性，prop属性是父组件用来传递数据的一个自定义属性。父组件的数据需要通过props把数据传递给子组件，子组件显示的调用props来获得父组件传递的数据。
<div id="root">
<input type="text" v-model:value="inputValue">
<button @click="handleSubmit">提交</button>
<ul>
<!--<li v-for="item of list">{{item}}</li>-->
<todo-item
v-for="(item,index) in list"
:key="index"
:content="item"
>
</todo-item>
</ul>
</div>
<script>
//定义全局组件
Vue.component('TodoItem',{
props:['content'],
template:'<li>{{content}}</li>',
})
new Vue({
data:{
inputValue: "",
list: []
} ,
methods:{
handleSubmit:function () {
this.list.push(this.inputValue);
this.inputValue="";
}
}
})
</script>
展示：
2.2局部组件：
声明局部组件：
var TodoItem={
template:'<li>item</li>'
}
局部组件声明后需要在父组件中使用components注册该组件
new Vue({
el:"#root",
components:{
'todo-ietm':TodoItem
}
})
使用局部组件实现todolist功能：
<div id="root">
<input type="text" v-model:value="inputValue">
<button @click="handleSubmit">提交</button>
<ul>
<todo-item
v-for="(item,index) in list"
:key="index"
:content="item"
>
</todo-item>
</ul>
</div>
<script>
//局部组件
var TodoItem={
props:['content'],
template: '<li>{{content}}</li>>'
}
new Vue({
el: "#root",
components: {
TodoItem: TodoItem
},
data:{
inputValue: "",
list: []
} ,
methods:{
handleSubmit:function () {
this.list.push(this.inputValue);
this.inputValue="";
}
}
})
</script>
组件与实例的关系：
任何一个vue项目都是由千千万万个vue实例组成，每一个组件都是一个vue实例。即每个组件中也可以写template，data，methods等内容。如果没有template属性，则会将el对应的挂载点下的全部内容作为该实例的模板。
3、todoList删除功能：
1）父组件将index值通过prop属性传递给子组件
2）为子组件添加点击事件，当点击子组件时通过$emit方法向父组件传递一个delete事件和this.index值
3）为父组件通过v-on:delete监听delete事件，如果监监听到子事件传递的delete事件，则触发函数handleDelete，并传入参数index。
4）父组件通过handleDelte函数删除该子组件。
实例：
<div id="root">
<input type="text" v-model:value="inputValue">
<button @click="handleSubmit">提交</button>
<ul>
<!--<li v-for="item of list">{{item}}</li>-->
<todo-item
v-for="(item,index) in list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
>
</todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
props:['content','index'],
template:'<li @click="handleClick">{{content}}</li>',
methods:{
handleClick: function () {
this.$emit("delete",this.index)
}
}
})
new Vue({
el: "#root",
data:{
inputValue: "",
list: []
} ,
methods:{
handleSubmit:function () {
this.list.push(this.inputValue);
this.inputValue="";
},
handleDelete: function (index) {
this.list.splice(index,1)
}
}
})
</script>
展示：
