<!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. DP杂题2

    1.邦邦的大合唱站队 https://www.luogu.org/problem/show?pid=3694 XY说这是道简单的签到题,然后我大概是普及组都拿不到三等的那种了.. 插入题解.写得太好了 ...

  2. iOS中消息的传递机制

    本文中,会经常提及接收者[recipient]和发送者[sender].在消息传递机制中具体是什么意思,我们可以通过一个示例来解释:一个table view是发送者,而它的delegate就是接收者. ...

  3. manacher/马拉车常用用法一览

    因为manacher算法把原来的字符串扩大了两倍,因此在应用时许多二级结论都非常不直观,现场推出来很麻烦,因此笔者在此做个简单整理,如果发现有错误或者有常用的我没有涉及到的,恳请在下方评论区指出,我会 ...

  4. MR/hive/shark/sparkSQL

    shark完全兼容hive,完全兼容MR,它把它们替代.类SQL查询,性能比hive高很多 sparkSQL比shark更快.shark严重依赖hive,hive慢,无法优化. SparkSQL和sh ...

  5. 一次完整的HTTP请求与响应涉及哪些知识？

    Java技术栈 www.javastack.cn 优秀的Java技术公众号 作者:Ruheng 地址:http://www.jianshu.com/p/c1d6a294d3c0 本文以HTTP请求和响 ...

  6. 运算符的基本概念以及常用Scanner、随机数Random、选择结构的初步了解

    运算符 分类 算术运算符 位运算符 关系运算符|比较运算符 逻辑运算符 条件运算符 赋值运算符 其中优先级顺序从上到下,可以记忆口诀:单目乘除位关系,逻辑三目后赋值 操作数: 运算符左右两边的数 表达 ...

  7. 第二周课堂笔记2th

    ---恢复内容开始--- 1. 2.索引取单个值 取多个值叫切片, 切片:取多个值 从左到右取值: 原则:顾头不顾尾 1, a[0:3] abc 2, a[-5:-2] abc 3, a[0:-2] ...

  8. <Django> MVT三大块之view(视图)

    1.视图简介 作用:接受web请求,返回web响应 本质:一个函数,定义在views.py文件中(定义在其他地方也行,约定俗成) 流程:(如果匹配不到,报一个404错误)-----结果返回http r ...

  9. 大型SQL文件导入mysql方案

    一. 场景 现有俩个体积较大的单表sql文件,一个为8G,一个为4G,要在一天内完整导入到阿里云的mysql中,需要同时蛮子时间和空间这俩种要求. 二. 思路 搜索了网上一堆的方案,总结了如下几个: ...

  10. 论文阅读笔记---HetConv

    1 写在前边的话 HetConv性能:当使用HetConv取代标准卷积之后,FLOPs大概是之前的1/8到1/3,更重要的是精度几乎不变!!! 论文地址:https://arxiv.org/abs/1 ...