组件:事件传递$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组件化开发 主要为了把一个大功能拆分成若干个小的功能,解决高耦合问题,同时也方便开发人员维护. 从功能上组件可以分为木偶组件和功能组件. 木偶组件(为了接收数据,渲染数据,基本上是没有逻辑的 ...
随机推荐
- WordPress 3.8 中文正式版下载 - 建站与学习首选!全球最流行的开源PHP博客网站程序
转载自:http://www.iplaysoft.com/wordpress.html 话说虽然我一直都在网站底部写着本站基于 WordPress 构建,但时常还是有人问我网站是用什么程序建的,还真有 ...
- 记录一次hexo托管到coding失败,页面总是404,可是相同的代码托管到github是没问题的。
文章目录 问题描述: 问题原因: 问题解决 2019.1.23 问题,coding又挂了. 弃疗 个人博客:https://mmmmmm.me 源码:https://github.com/dataiy ...
- scrapy爬虫框架爬取招聘网站
目录结构 BossFace.py文件中代码: # -*- coding: utf-8 -*-import scrapyfrom ..items import BossfaceItemimport js ...
- P1030 求先序排列 /// 二叉树的遍历
题目大意: 给一棵树的中序排列 后序排列,求这棵树的先序排列 https://www.luogu.org/problemnew/show/P1030 二叉树的四种遍历解说 几种遍历的递归实现 后序排列 ...
- bigcolorpicker 颜色拾取器插件——例
参考:http://bigui4.sinaapp.com/picker/colorpicker.html 效果: html: <!DOCTYPE html> <html> &l ...
- LINUX交换分区
交换分区最大容量为64G,最多只能建32个, 创建交换分区 #fdisk /dev/hdaànà+容量àpàt(修改系统ID)à分区号à82àpàw #mkswap /dev/hda ...
- Android开发 设备横屏与竖屏的详解
需要了解横竖屏切换关键知识 1.在Android设备的横竖屏幕,每一次切换横竖屏其实是在重新创建Activity,Activity会重新走一遍生命周期.从onCreate 到 onDestroy 2. ...
- 查看java资源的占用
1,使用命令top -p <pid> ,显示你的java进程的内存情况,pid是你的java进程号,比如1232,按H,获取每个线程的内存情况3,找到内存和cpu占用最高的线程pid,比如 ...
- day1-字符串、列表
字符串操作: name = "Wills Qian" # 创建字符串变量 print(len(name)) # 打印字符串长度 print(name[0]) # 提取第一个字符W ...
- RSA算法的基本原理
记得在我上初一的时候做过这么一道数学竞赛题,就是求7的222次方的个位数字.当时教材上介绍的解题方法是将222分解成4*55+2,然后算出7的2次方个个位数字即为要算的数值.当时年幼无知的我根本不了解 ...