vue组件通信——子组件传递数据给父组件

最新推荐文章于 2024-11-12 16:39:38 发布

原创最新推荐文章于 2024-11-12 16:39:38 发布 · 242 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

17 篇文章

订阅专栏

本文介绍Vue中子组件如何向父组件传递数据。通过实例演示了子组件使用$emit触发事件，父组件通过v-on监听并获取子组件传递的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上次已经介绍了父组件如何传递数据给子组件，那么，子组件又是如何将数据传递给父组件的呢？

vue中，子组件用$emit()来触发事件，父组件用$on()来监听子组件，也可通过直接在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件。

下面通过一个例子来讲解：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>每次加1后的总数：{{count1}}</p>
    <p>每次加2后的总数：{{count2}}</p>
    <my-com @toadd1="total1" @toadd2="total2"></my-com>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    Vue.component('my-com',{
        template:'<div><button @click="add1">加1</button><button @click="add2">加2</button></div>',
        data:function(){
            return {
                count:0
            }
        },
        methods:{
            add1:function(){
                this.count++;
                this.$emit('toadd1',this.count);
            },
            add2:function(){
                this.count+=2;
                this.$emit('toadd2',this.count);
            }
        }
    });
    var app=new Vue({
        el:'#app',
        data:{
            count1:0,
            count2:0
        },
        methods:{
            total1:function(count){
                this.count1=count;
            },
            total2:function(count){
                this.count2=count;
            }
        }
    })
</script>
</body>
</html>

这里只讲解加1的操作，在子组件中，在模板中声明了一个自定义事件toadd1，父组件通过v-on事件绑定，在子组件中执行加1操作后，通过$emit来触发toadd1事件（emit的第一个参数，子组件的自定义事件），通过传入参数（emit的第二个参数），当子组件触发后父组件监听并将数据通过参数传递给total函数，然后渲染到父组件中。

明天继续补充！！！