Vue2 框架整理：子组件向父组件传递数据，$emit() 或 v-on

最新推荐文章于 2024-07-12 21:26:02 发布

freedom_文

最新推荐文章于 2024-07-12 21:26:02 发布

阅读量2.6k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/freedomVenly/article/details/80875669

版权

Vue 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

这里写图片描述

当子组件向父组件传递数据的时候，需要的是自定义事件： $on & $emit

子组件用$emit()触发事件，父组件用$on() 监听子组件的事件

或者父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件：

$emit() 中第一个参数是方法的名称，后面都是根据需求设定要传递的数据

比如：（下面所有 v-on 简写为语法糖@）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #v1{
            display: none;
            width:200px;
            margin: 100px;
            border: 2px solid #faf;
        }
    </style>
</head>
<body>

<div id="v1">

    <v-component @add="sum" @reduce="sum"></v-component>

    <p>计算结果：{{ total }}</p>

</div>


<script src="vue.min.js"></script>
<script>
    window.onload=function () {
        document.getElementById("v1").style.display="block";
    };

    Vue.component('v-component',{
        template:'<div>'+
                    '<button @click="comPlus">点我加一</button> '+
                    '<button @click="comMinus">点我减一</button>'+
                  '</div>',
        data:function () {
            return{
                num:0
            }
        },
        methods:{
            comPlus:function () {
                this.num++;
                this.$emit('add',this.num);
            },
            comMinus:function () {
                this.num--;
                this.$emit('reduce',this.num);
            }
        }
    });

    var app=new Vue({
        el:"#v1",
        data:{
            total:0
        },
        methods:{
            sum:function (total) {
                this.total=total;
            }
        }
    })
</script>

</body>
</html>

实现效果：
这里写图片描述

freedom_文

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue2 框架整理：子组件向父组件传递数据，$emit() 或 v-on

当子组件向父组件传递数据的时候，需要的是自定义事件： $on &amp;amp; $emit子组件用$emit()触发事件，父组件用$on() 监听子组件的事件或者父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件：$emit() 中第一个参数是方法的名称，后面都是根据需求设定要传递的数据比如：（下面所有 v-on 简写为语法糖@）&amp;lt...
复制链接

扫一扫

专栏目录