Vue入门 Demo4 子父组件相互传值(实现TodoList在列表展示后点击数据自动删除)

<!DOCTYPE html>
<html lang="en"> 
    <head> 
        <meta content="text/html; charset=utf-8" /> 
        <title>TodoList</title> 
        <script src="./vue.js"></script>
    </head> 
    <body> 
       <div id="app">
           <!--v-model 双向绑定inputValue-->
           <input type="text" v-model="inputValue"/>
           <!--点击button将加载点击事件-->
           <button v-on:click="handlerBtnClick">提交</button>
           <ul>
               <!-- <li v-for="item in list">{{item}}</li> -->
               <!-- 调用组件 v-bind="item":指向子组件传递值 @delete="handleItemDelete:对子组件进行监听 index指下标 注意:v-bind可以省略-->
                <todo-item v-for="(item,index) in list"
                          v-bind:content="item"
                          v-bind:index="index"
                          @delete="handleItemDelete">
                </todo-item>
           </ul>
       </div>
          
       <script>

           //创建局部组件 v-on:click等同于@click
           var TodoItem = {
              props: ['content','index'],
              template: "<li @click='handleItemClick'>{{content}}</li>",
              methods: {
                 handleItemClick: function(){
                     //子组件向父组件传值
                     this.$emit("delete", this.index)
                }
              }
           }

           var app = new Vue({  
               el: '#app',
               //使用局部组件是注册
               components: {
                TodoItem: TodoItem,
               },
               data: {
                   list: [],
                   inputValue: '',
               },
               //点击事件加载需要在methods方法中
               methods: {
                  handlerBtnClick: function() {
                    //   alert(this.inputValue);
                    this.list.push(this.inputValue);
                    this.inputValue = '';
                  },
                  handleItemDelete: function(index){
                      //删除
                      this.list.splice(index,1);
                  }
               }
           })
       </script>
    </body> 
</html>

城南花已开呀

发布了33 篇原创文章 · 获赞 2 · 访问量 4720

私信关注

Vue入门 Demo4 子父组件相互传值(实现TodoList在列表展示后点击数据自动删除)

Vue入门 Demo4 子父组件相互传值(实现TodoList在列表展示后点击数据自动删除)

猜你喜欢