vue父子之间的传值

功能：模仿todolist，增加条目，点击条目，删除该条目

局部组件接收父值通过props

子组件给父传值$emit事件广播，父再接收

 1 <html lang="en">
 2   <head>
 3     <meta charset="UTF-8">
 4     <title>TodoList</title>
 5     <script src="./vue.js"></script>
 6   </head>
 7   <body>
 8     <div id="app">
 9       <input type="text" v-model="inputVal"/>
10       <button v-on:click="handleClick">提交</button>
11       <ul>
12         <todo-item v-bind:content="item" 
13                     v-bind:index="index"
14                     v-for="(item,index) in list"
15                     @delete="handleItemDelete">
16         </todo-item>
17       </ul>
18     </div>
19     <script>
20      
21 
22       // 全局组建
23       // Vue.component("TodoItem",{
24       //   props:['content'],
25       //   template:"<li>{{content}}</li>"
26       // });
27 
28       //局部组件
29       //局部组件接收父值通过props
30       //子组件给父传值$emit事件广播，父再接收
31       var TodoItem = {
32         props:['content','index'],
33         template:"<li @click='handleItemClick'>{{content}}</li>",
34         methods:{
35           handleItemClick:function(){
36             this.$emit("delete",this.index);
37           }
38         }
39       };
40       var app = new Vue({
41         el:'#app',
42         components:{
43           TodoItem:TodoItem
44         },
45         data:{
46           list:[],
47           inputVal:""
48         },
49         methods:{
50           handleClick:function(){
51             this.list.push(this.inputVal)
52           },
53           handleItemDelete:function(index){
54             this.list.splice(index,1);
55           }
56         }
57       })
58     </script>
59   </body>
60 </html>

posted on 2019-07-09 19:40 崭新开始阅读(2547) 评论(0) 编辑收藏举报