<!DOCTYPE html>

<html lang="zh">

<head>

    <title></title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <link href="../css/style.css" rel="stylesheet"> </head>

<body>

<div id="myApp">

    <h1>人生加法</h1>

    <add-method :a="6" :b="12" v-on:add_event="getAddResult"></add-method>

    <hr/>

    <h3>{{result}}</h3>

</div>

<script>

    Vue.component('add-method', {

        props: ['a', 'b'],

        template: '<div><button v-on:click="add">加吧</button></div>',

        methods: {

            add: function(){

                var value = 0;

                value = this.a + this.b;

                this.$emit('add_event', {

                    result:value

                });

            }

        },

    });

    var myApp = new Vue({

        el: '#myApp',

        data: {

            result: 0

        },

        methods: {

            getAddResult: function(pval){

                this.result = pval.result;

            }

        },

    });

</script>

</body>

</html>

组件：事件传递$emit的更多相关文章

  1. 微信小程序 组件事件传递

    父组件向子组件传递初始数据,当子组件点击以后可以triggerEvent自定义事件,父组件执行自定义事件,重新请求数据并传给子组件 /* 子组件 */ <view> <view bi ...

  2. Vue中的$emit组件事件运用

    话不多说上代码 vue>src>App.vue <template> <div id="app"> <!-- header --> ...

  3. vue2.x 父组件监听子组件事件并传回信息

    利用vm.$emit 1.在父组件中引用子组件 <child @from-child-msg="listenChildMsg"></child > 2.子组 ...

  4. vue2自定义事件之$emit

    父组件: API上的解释不多: https://cn.vuejs.org/v2/api/#vm-emit vm.$emit( event, […args] ) 参数: {string} event [ ...

  5. vue-learning：28 - component - 组件事件的修饰符`.native / .sync`，以及组件属性`model`

    组件事件的修饰符.native / .sync,以及组件属性model .native 原生事件修饰符 在一个组件中,如果我们为其绑定一个原生的点击事件@click,基本是无效的. 在vue中对组件绑 ...

  6. 微信小程序 - 组件 | 自定义组件 | 组件事件传递页面

    组件 小程序允许我们使用自定义组件的方式来构建页面 类似Vue的小组件 自定义组件 类似于页面,一个自定义组件由 json, wxml, wxss, js 4个文件组成 1.创建 1.创建compon ...

  7. vuejs2.0实现分页组件，使用$emit进行事件监听数据传递

    上一篇文章介绍了vuejs实现的简单分页,如果我有几个页面都需要有分页效果,不可能每个页面都去复制一下这段代码吧,意思是封装一下,变成通用的组件. 首先使用基础 Vue 构造器,创建一个“子类”,Vu ...

  8. vue组件的使用和事件传递

    子组件与父组件的事件传递具体实现如下: 子组件: <template> <section class="xftz-data-list"> <div c ...

  9. vue 组件数据传递

    vue组件化开发 主要为了把一个大功能拆分成若干个小的功能,解决高耦合问题,同时也方便开发人员维护.   从功能上组件可以分为木偶组件和功能组件. 木偶组件(为了接收数据,渲染数据,基本上是没有逻辑的 ...

随机推荐

  1. layui点击按钮自动刷新页面问题

    问题 <button class="layui-btn layui-btn-primary" onclick="findData()">查询< ...

  2. 现金贷平台下载量TOP100 涉逾30家P2P

    一.什么是现金贷,现状如何 那么什么是现金贷呢?在笔者看来,狭义的现金贷主要是指基于互联网等技术手段的小额现金贷款,广义的现金贷可以包括任何以小额现金和存款为标的进行借贷的行为,是一种无担保.无抵押. ...

  3. 前端笔记:animate+easing用法（hexo next主题自定义动画）

    个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io easing介绍 animate默认是有加速度 ...

  4. MME、PGW、SGW和PCRF的介绍

    1.简介原文连接:https://blog.csdn.net/Rong_Toa/article/details/94983607 用户面和控制面板分离2.什么是HSS?HSS有什么主要功能?HSS与H ...

  5. 最最最详细的IDEA导入Eclipse项目

    很详细的IDEA导入Eclipse项目,配置tomcat并运行项目 1.把Eclipse项目复制一份,放到自己指定的位置 2.打开Idea,在进入工程前选择,inmport Project 注意事项: ...

  6. 使用virtualenv发布Python程序

    客户环境不能上网,开始想把所有依赖包下载下来,进入客户环境进行安装.但为了避免出差,部署工作交给其他同事了,我想还是需要更简单的方式. 实验了一下virtualenv是可以的 1. 创建一个新的环境( ...

  7. 第四周课堂笔记2th

    2. 在函数中*对于形参的作用是聚合,对于实参的作用是打散 3. 加载顺序:内置——全局——局部空间 取值顺序:局部——全局——内置空间 左上角的答案: 123 666 888 777 右边的答案:7 ...

  8. webservice、httpClient、dubbo的区别

    在开发中,对于同一个war包中的对象方法我们可以直接调用,但是很多情况下需要在不同项目或者不同服务器进行相互调用 webservice webservice技术可以实现不同服务器项目直接的调用和交换数 ...

  9. asp.net去除HTML标签

    public string NoHTML(string Htmlstring) //替换HTML标记 { //删除脚本 Htmlstring = Regex.Replace(Htmlstring, @ ...

  10. 180608发现的一个有趣的Douyin-Bot项目

    今日发现的github 项目 Douyin-Bot 抖音机器人发现漂亮小姐姐 :sweat_smile: 在开发者模式下,找到指针位置,开启之后,当点击屏幕时,可以获取点击屏幕处的xy坐标了 我使用的 ...