Vuejs 实现简易 todoList 功能与组件实例代码

2023-09-08 07:58:05 139

todoList

结合之前Vuejs基础与语法
•使用v-model双向绑定input输入内容与数据data
•使用@click和methods关联事件
•使用v-for进行数据循环展示





TodoList






提交



{{item}}

JSbin预览

todoList组件拆分

Vuejs组件相关详细参考组件基础

全局组件

注册全局组件，并在HTML中通过模板调用组件

//注册全局组件
Vue.component('todo-item',{
template:'item'
})

JSbin预览

局部组件

在注册了局部组件之后，直接通过模板调用是不可以的，必须要在最外层的Vue的实例中添加components:{}进行组件声明。

//注册局部组件
varTodoItem={
template:'item'
}
newVue({
el:"#root",
components:{//局部组件需要声明的components
'todo-item':TodoItem
},
data:{
inputValue:'',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue)
this.inputValue=''
}
}
})

JSbin预览

即通过局部注册的组件，需要在其他的Vue实例中使用该局部组件。必须使用components对该局部组件进行注册。
上面的实例中，要在Vue实例中使用TodoItem这个局部组件，就通过todo-item这个标签来使用。当在实例中注册好了以后，才可以在模板里面使用这个标签。这样就算正确的使用了局部组件。

外部传递参数

给todo-item标签添加:content属性，值为循环的每一项的内容"item"，

这样就可以吧content传递给todo-item这个组件

但是直接将组件改成是不行的

Vue.component('todo-item',{
template:'{{content}}'
})

需要让组件接收属性，所以要在todo-item组件里面定义props属性，其值为一个数组'content'。
其含义是，该组件接收从外部传递的进来的名字叫做content的属性

Vue.component('todo-item',{
props:['content'],
template:'{{content}}'
})

JSbin预览

组件与实例的关系

Vue之中，每一个组件其实也是一个Vue的实例。因此在Vue项目中，是一个个实例构建而成的。
因此组件之中，也可以绑定@click事件，添加methods属性。

Vue.component('todo-item',{
props:['content'],
template:'{{content}}',
methods:{
handleClick:function(){
alert('clicked')
}
}
})

JSbin预览

同样的实例也可以被称作一个组件，那么我们这个根实例当中的template模板是什么呢?
如果一个Vue实例没有模板，会到挂载点去找。如下实例，根实例会找到#root下面挂载点的所有内容作为模板。

newVue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue)
this.inputValue=''
}
}
})

为todoList添加删除功能

通过发布/订阅，当子组件点击时，通知父组件把数据删除掉。在子组件中，发布自定义一个'delete'事件。调用this.$emit方法，并传递index的值。

子组件向外部进行发布

//子组件
Vue.component('todo-item',{
props:['content','index'],
template:'{{content}}',
methods:{
handleClick:function(){
//发布
this.$emit('delete',this.index)
}
}
})

父组件在模板里创建子组件的时候，监听子组件向外触发的delete事件，如果监听到delete事件，执行handleDelete函数。

然后在父组件的methods中，写好handleDelete方法。

//最外层实例，父组件
newVue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue)
this.inputValue=''
},
handleDelete:function(index){
this.list.splice(index,1)//使用splice方法删除list
}
}
})

总结

以上所述是小编给大家介绍的Vuejs实现简易todoList功能与组件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

Vuejs 实现简易 todoList 功能 与 组件实例代码

热门推荐

随机推荐

Vuejs 实现简易 todoList 功能与组件实例代码