（vue基础试炼_05）简单组件之间的传值

落魄码农在线炒粉 lv.1

发布时间：2022-10-28 17:16:14 340

相关标签： # vue.js# html# 数据# 监控

接上一篇：（vue基础试炼_04）使用组件改造TodoList

文章目录

一、上篇回顾

① 代码欣赏
② 代码分析

二、子组件如何向父组件传值呢？

① 需求案例文档
② 需求案例效果图
③ 思考与思路
④ 页面验证是否生效

三、删除与数据

① 点击对应的内容，然后删除，又应该怎样做呢？
② 删除思路
③ 模拟删除
④角标删除
⑥ 父子传值总结
⑦ 指令简写

一、上篇回顾

① 代码欣赏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用组件改造TodoList</title>
    <!--引入vue.js库-->
    <script src="vue.js"></script>
</head>

<body>
<!--vue接管的div-->
<div id="root">
    <div>
        <input type="text" v-model="inputValue">
        <button v-on:click="handleBtnClick">提交</button>
    </div>
    <ul>
        <todo-item v-bind:content="item"
                   v-for="item in list">
        </todo-item>
    </ul>
</div>

<script>
    /*创建一个局部组件 TodoItem*/
    var TodoItem = {
        props: ['content'],
        template: "<li>{{content}}</li>"
    }
    /*创建了一个vue实例*/
    var app = new Vue({
        el: '#root',
        /*通过对象来注册局部组件TodoItem*/
        components: {
            TodoItem: TodoItem
        },
        data: {
            list: [],
            inputValue: ''
        },
        methods: {
            handleBtnClick: function () {
                this.list.push(this.inputValue)
                this.inputValue = ''
            }
        }
    });
</script>
</body>
</html>

② 代码分析

（vue基础试炼_05）简单组件之间的传值_数据

（vue基础试炼_05）简单组件之间的传值_vue.js_02

（vue基础试炼_05）简单组件之间的传值_数据_03

（vue基础试炼_05）简单组件之间的传值_vue.js_04

（vue基础试炼_05）简单组件之间的传值_html_05

序号	说明
①	最外层的父组件就是Vue实例
②	id等于root的div内容，其实就是最外层Vue实例父组件的模板
③	我们创建了一个子组件TodoItem子组件
④	通过`todo-item`标签的形式，使用了这个子组件
⑤	父组件给子组件传值

通过上一篇，大家已经学会了父组件给子组件传值这种方式。
通过v-bind指令将list循环出来的每一项的值item，借助content变量传递todo-tem子组件，子组件通过 props: [‘content’],来接收父组件传递过来的参数值，最后，在模板中通过插值表达式渲染到页面上进行展示！

二、子组件如何向父组件传值呢？

① 需求案例文档

点击列表中的任意一项，进行数据删除

② 需求案例效果图

（vue基础试炼_05）简单组件之间的传值_vue.js_06

③ 思考与思路

这个需求中涉及到了子组件向组件传值的相关知识点了
既然是在子组件中点击内容做的操作，那就给子组件绑定一个事件，当点击事件时，在做逻辑操作即可。

步骤	说明
①	在子组件中绑定一个handleItemClick
②	在子组件的methods下面写handleItemClick 的方法

（vue基础试炼_05）简单组件之间的传值_html_07

④ 页面验证是否生效

（vue基础试炼_05）简单组件之间的传值_数据_08

三、删除与数据

① 点击对应的内容，然后删除，又应该怎样做呢？

② 删除思路

数据在哪存放着呢？父组件的list数组中，父组件决定子组件显示多少个，所以，删除子组件的时候，我们需要点击子组件，子组件把对应的内容传给父组件，让父组件去改变数据，父组件的数据改变了，子组件就会减少或者增加，那具体应该怎样操作呢？

子组件向父组件传值，我们通过this.$emit('delete')向外触发事件

（vue基础试炼_05）简单组件之间的传值_html_09

简述：当我点击子组件时，子组件向外触发一个delete事件，那么，我在父组件里面，创建子组件的同时，可以监听这个delete事件。

（vue基础试炼_05）简单组件之间的传值_vue.js_10

一旦删除事件被触发的时候，就会执行父组件中的handleItemDelete这个方法，因此，我们需要在父组件的methods中定义handleItemDelete这个方法。

（vue基础试炼_05）简单组件之间的传值_vue.js_11

（vue基础试炼_05）简单组件之间的传值_简单组件传值_12

③ 模拟删除

下面，我们需要做的就是改变list中的数据即可
先让list等于空数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用组件改造TodoList</title>
    <!--引入vue.js库-->
    <script src="vue.js"></script>
</head>

<body>
<!--vue接管的div-->
<div id="root">
    <div>
        <input type="text" v-model="inputValue">
        <button v-on:click="handleBtnClick">提交</button>
    </div>
    <ul>
        <todo-item v-bind:content="item"
                   v-for="item in list"
                    @delete="handleItemDelete">
        </todo-item>
    </ul>
</div>

<script>
    /*创建一个局部组件 TodoItem*/
    var TodoItem = {
        props: ['content'],
        template: "<li @click='handleItemClick'>{{content}}</li>",
        methods: {
            handleItemClick: function () {
                // alert('click')
                this.$emit('delete');
            }
        }
    }
    /*创建了一个vue实例*/
    var app = new Vue({
        el: '#root',
        /*通过对象来注册局部组件TodoItem*/
        components: {
            TodoItem: TodoItem
        },
        data: {
            list: [],
            inputValue: ''
        },
        methods: {
            handleBtnClick: function () {
                this.list.push(this.inputValue)
                this.inputValue = ''
            },
            handleItemDelete: function () {
                // alert('click');
                this.$data.list = []
            }
        }
    });
</script>
</body>
</html>

（vue基础试炼_05）简单组件之间的传值_数据_13

④角标删除

删除是实现了但是，删除了所有，那怎样删除指定的内容呢？如果获取内容的角标就好了，我们就可以根据角标删除。
当父组件箱子组件传值的时候，不能只传content，在传一个内容的下标，在子组件中再添加一个下标index，等会作为删除的角标；当父组件传递下标时也许要在子组件中接收。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用组件改造TodoList</title>
    <!--引入vue.js库-->
    <script src="vue.js"></script>
</head>

<body>
<!--vue接管的div-->
<div id="root">
    <div>
        <input type="text" v-model="inputValue">
        <button v-on:click="handleBtnClick">提交</button>
    </div>
    <ul>
        <todo-item v-bind:content="item"
                   v-bind:flag="index"
                   v-for="(item,index) in list"
                   @delete="handleItemDelete">
        </todo-item>
    </ul>
</div>

<script>
    /*创建一个局部组件 TodoItem*/
    var TodoItem = {
        props: ['content', 'flag'],
        template: "<li @click='handleItemClick'>{{content}}</li>",
        methods: {
            handleItemClick: function () {
                // alert('click')
                this.$emit('delete', this.flag);
            }
        }
    }
    /*创建了一个vue实例*/
    var app = new Vue({
        el: '#root',
        /*通过对象来注册局部组件TodoItem*/
        components: {
            TodoItem: TodoItem
        },
        data: {
            list: [],
            inputValue: ''
        },
        methods: {
            handleBtnClick: function () {
                this.list.push(this.inputValue);
                this.inputValue = ''
            },
            handleItemDelete: function (flag) {
                // alert(flag);
                // this.$data.list = []
                this.list.splice(flag, 1)
            }
        }
    });
</script>
</body>
</html>

⑥ 父子传值总结

父组件给子组件传值：通过v-bind借助变量给子组件传值，子组件要在props中进行接收
子组件给父组件传值：我们通过$emit向上触发事件，子组件触发的事件，父组件恰好在监听，接收监控后，父组件就可以接收到子组件传递过来的内容，来实现子组件相符组件传值的功能。

⑦ 指令简写

指令	简写
v-on:	@
v-bind:	:

（vue基础试炼_05）简单组件之间的传值_html_14

（vue基础试炼_05）简单组件之间的传值_vue.js_15

文章来源： https://blog.51cto.com/u_13610693/5654258

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。