初识 Vue（05）---(组件间传值)

最新推荐文章于 2022-07-07 12:02:12 发布

姜皓

最新推荐文章于 2022-07-07 12:02:12 发布

阅读量160

点赞数

分类专栏： # Vue # 从浅入深学 Vue

本文链接：https://blog.csdn.net/jianghao233/article/details/80978439

版权

Vue 同时被 2 个专栏收录

28 篇文章 1 订阅

订阅专栏

从浅入深学 Vue

28 篇文章 8 订阅

订阅专栏

组件间传值（改进 TodoList）

改进 TodoList ，点击那个输出，那个输出就会消失

步骤一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TodoList</title>
    <script src = './vue.js'></script>
</head>
<body>
    <div id ='app'>
        <input type="text" v-model="inputValue"/>
        <button v-on:click="handleBtnClick">提交</button>
        <todo-item v-bind:content="item" 
            v-for="item in list">
        </todo-item> 
    </div>

    <script>
        var TodoItem = {
            props:['content'],
            template:"<li @click='handleItemClick'>{{content}}</li>",
            methods:{
                handleItemClick:function(){
                    alert("click")
                }
            }
        }

        var app = new Vue({
            el: '#app',
            components:{
                TodoItem:TodoItem
            },
            data:{
                list: [],
                inputValue:''
            },
            methods:{
                handleBtnClick:function(){
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                }
            }
        })
    </script>
</body>
</html>
      template:"<li @click='handleItemClick'>{{content}}</li>",
            methods:{
                handleItemClick:function(){
                    alert("click")
                }
            }
        }

        var app = new Vue({
            el: '#app',
            components:{
                TodoItem:TodoItem
            },
            data:{
                list: [],
                inputValue:''
            },
            methods:{
                handleBtnClick:function(){
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                }
            }
        })
    </script>
</body>
</html>

运行：

当点击输出值时，弹出对话框

步骤二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TodoList</title>
    <script src = './vue.js'></script>
</head>
<body>
    <div id ='app'>
        <input type="text" v-model="inputValue"/>
        <button v-on:click="handleBtnClick">提交</button>
        <todo-item v-bind:content="item" 
            v-for="item in list"
            @delete="handleItemDelete">
        </todo-item> 
    </div>

    <script>
        var TodoItem = {
            props:['content'],
            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:{
                handleBtnClick:function(){
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                },
                handleItemDelete:function(){
                 this.list = []
                }
            }
        })
    </script>    
</body>
</html>
   <todo-item v-bind:content="item" 
            v-for="item in list"
            @delete="handleItemDelete">
        </todo-item> 
    </div>

    <script>
        var TodoItem = {
            props:['content'],
            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:{
                handleBtnClick:function(){
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                },
                handleItemDelete:function(){
                 this.list = []
                }
            }
        })
    </script>    
</body>
</html>

当点击子组件的时候，子组件会向外触发一个“delete”事件，在父组件里创建子组件的同时可以监听“delete”事件，用（v-on）简写 “@”监听“delete”事件，即 @delete="handleItemDelete" ；在父组件的模板中，创建父组件的同时也监听子组件的“delete”事件，一旦“delete”事件被触发时，就会执行父组件当中的 “handleItemDelete”方法，在父组件中定义“handleItemDelete”的方法，即 handleItemDelete:function(){ this.list = []}

输出：

当点击时，两个输入元素都被删除掉；当监听到点击事件，就会把 list 清空，导致数据发生变化，循环发生变化，则 todo-item 不存在了（但需要点击那个，那个会消失而不是全部消失）

步骤三

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TodoList</title>
    <script src = './vue.js'></script>
</head>
<body>
    <div id ='app'>
        <input type="text" v-model="inputValue"/>
        <button v-on:click="handleBtnClick">提交</button>
        <todo-item v-bind:content="item" 
                   v-bind：index="index"
                   v-for="item in list"
                   @delete="handleItemDelete">
        </todo-item> 
    </div>

    <script>
        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:{
                handleBtnClick:function(){
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                },
                handleItemDelete:function(index){
                 this.list .splice(index,1)
                }
            }
        })
    </script>
    
</body>
</html>
v-bind：index="index"
                   v-for="item in list"
                   @delete="handleItemDelete">
        </todo-item> 
    </div>

    <script>
        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:{
                handleBtnClick:function(){
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                },
                handleItemDelete:function(index){
                 this.list .splice(index,1)
                }
            }
        })
    </script>
    
</body>
</html>

当向父组件传值时，还会多传一个 Index , 即 v-bind：index="index" ，指 todo-item 的下标（第几个 todo-item）,还需要接收这个下标，即 props:['content','index'], 会被子组件接收；子组件一旦被点击时，不仅触发 “delete”事件，还把 this.index 作为参数带给父组件，即 this.$emit("delete",this.index);父组件监听 "delete"事件，会执行 "handleItemDelete"方法，会拿到子组件传来的 this.index ；接着从下标开始删除一项即可把该项数据删除，即 this.list .splice(index,1)，实现功能！（v-bind 可简写成 “ ：” v-bind：index="index" 相当于：index="index" ）