todolist---插入和删除----vue 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title> todolist删除</title>
 6     <link rel="stylesheet" href="test1.css">
 7     <script type="text/javascript" src="vue.js"></script>
 8 
 9 </head>
10 <body>
11 <div id="rooter">
12     <input type="text" v-model="valueput"/>
13     <button @click="handler">提交</button>
14     <ul>
15         <todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index"
16         @delete="handleDelete"></todo-item>
17     </ul>
18 </div>
19 <script>
20     var todoitem={
21         props:["content","index"],  //将值从父组件来接听
22         template:'<li @click="had">{{content}}</li>',
23         methods:{
24             had:function () {
25                 this.$emit("delete",this.index);  //可以将值传给父组件
26             }
27         }
28     };
29     new Vue({
30         el:'#rooter',
31         data:{
32             valueput:"",
33             list:[],
34             content:''
35         },
36         components:{
37             'todo-item':todoitem
38         },
39         methods:{
40             handler:function(){
41                 this.list.push(this.valueput);
42                 this.valueput="";
43 
44             },
45             handleDelete:function(index){
46                 this.list.splice(index,1);
47             }
48         }
49 
50     });
51     console.log(1);
52 </script>
53 </body>
54 </html>

父组件向子组件传递参数，通过属性的方式和props

子组件向父组件传递参数，通过发布的方式：this.$emit("",...............)

posted @ 2018-09-23 14:47  阿兰儿  阅读(347)  评论(0)  编辑  收藏  举报