vue组件： todolist功能开发，todolist组件拆分，todoLidt删除

秒速五厘米 2022-05-15 06:59 210阅读 0赞

通过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>

展示：

![70][]

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>
                
                <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>

展示：

![70 1][]

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>  
          
        <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>

展示：

![70 2][]

[70]: /images/20220515/12fda564213a411dbc3c09001cda1aea.png
[70 1]: /images/20220515/59e6e6eba54c4ce0bbfd9a1f7ffb8a8a.png
[70 2]: /images/20220515/d2ea1f041617480f9738030906e39751.png