组件：事件传递$emit
<!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的更多相关文章
- 微信小程序 组件事件传递
父组件向子组件传递初始数据,当子组件点击以后可以triggerEvent自定义事件,父组件执行自定义事件,重新请求数据并传给子组件 /* 子组件 */ <view> <view bi ...
- Vue中的$emit组件事件运用
话不多说上代码 vue>src>App.vue <template> <div id="app"> <!-- header --> ...
- vue2.x 父组件监听子组件事件并传回信息
利用vm.$emit 1.在父组件中引用子组件 <child @from-child-msg="listenChildMsg"></child > 2.子组 ...
- vue2自定义事件之$emit
父组件: API上的解释不多: https://cn.vuejs.org/v2/api/#vm-emit vm.$emit( event, […args] ) 参数: {string} event [ ...
- vue-learning：28 - component - 组件事件的修饰符`.native / .sync`，以及组件属性`model`
组件事件的修饰符.native / .sync,以及组件属性model .native 原生事件修饰符 在一个组件中,如果我们为其绑定一个原生的点击事件@click,基本是无效的. 在vue中对组件绑 ...
- 微信小程序 - 组件 | 自定义组件 | 组件事件传递页面
组件 小程序允许我们使用自定义组件的方式来构建页面 类似Vue的小组件 自定义组件 类似于页面,一个自定义组件由 json, wxml, wxss, js 4个文件组成 1.创建 1.创建compon ...
- vuejs2.0实现分页组件，使用$emit进行事件监听数据传递
上一篇文章介绍了vuejs实现的简单分页,如果我有几个页面都需要有分页效果,不可能每个页面都去复制一下这段代码吧,意思是封装一下,变成通用的组件. 首先使用基础 Vue 构造器,创建一个“子类”,Vu ...
- vue组件的使用和事件传递
子组件与父组件的事件传递具体实现如下: 子组件: <template> <section class="xftz-data-list"> <div c ...
- vue 组件数据传递
vue组件化开发 主要为了把一个大功能拆分成若干个小的功能,解决高耦合问题,同时也方便开发人员维护. 从功能上组件可以分为木偶组件和功能组件. 木偶组件(为了接收数据,渲染数据,基本上是没有逻辑的 ...
随机推荐
- linux环境变量设置错误后的恢复方法（转）
原文: http://blog.csdn.net/hoholook/article/details/2793447 linux环境变量设置错误后的恢复方法 中国自学编程网收集整理 发布日期:2008 ...
- [kuangbin带你飞]专题一 简单搜索 - C - Catch That Cow
#include<iostream> #include<cstdio> #include<string> #include<vector> #inclu ...
- webpack 简单笔记（一）
安装部分不介绍了 (一)第一个最简单的demo,单入口,单文件 目录结构: webapck.config.js中代码: 'use strict' const path = require('path' ...
- 【2011集训贾志鹏】Crash 的数字表格
题面 题目分析 (默认\(n<m\)) 题目要求\(\sum\limits_{i=1}^n\sum\limits_{j=1}^mlcm(i,j)\). 由\(lcm(i,j)=\frac{i\c ...
- Java虚拟机性能管理神器 - VisualVM（8） 查找JAVA应用程序耗时的方法函数【转】
Java虚拟机性能管理神器 - VisualVM(8) 查找JAVA应用程序耗时的方法函数[转] 标签: javajvm监控工具性能优化 2015-04-07 16:47 1846人阅读 评论(0) ...
- jmeter参数化遇到的问题
遇到的问题是点击运行后,察看结果树没有任何结果,且右上角的警告日志是: meter.threads.JMeterThread: Test failed! java.lang.IllegalArgume ...
- 关于Slice的一些补充说明
s[m:n:l] 规则总结如下. (1) 范围 [m,n),从m开始轮询:超出范围后选边界值. l>0 l<0 关于边界值 (2) 把字符串完全反序,用 s[::-1]. 有些文档上说 s ...
- 廖雪峰Java12maven基础-1maven入门-3构建流程
maven是一个Java项目管理和构建工具: 标准化项目结构 标准化构建流程(编译.打包.发布) 依赖管理 Maven的构建流程 clean 删除所有编译生成的文件 compile 编译源码.编译测试 ...
- escape encodeURI和encodeURIComponent的区别
escape(与之对应->unescape) escape是对字符串(string)进行编码(而另外两种是对URL),作用是让它们在所有电脑上可读.编码之后的效果是%XX或者%uXXXX这种形式 ...
- 2016年深圳市服务业占GDP比重首次突破六成
2016年深圳市服务业占GDP比重首次突破六成 中商产业研究院 中商情报网 2017-01-12 11:08 分享: 中商情报网讯 1月10日,深圳市财政委员会召开新闻发布会,就深圳市2016 ...