通过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>
展示: