<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of page</title>
</head>
<body>

<div id="example">
<input v-model="parentsg">
<br>
<child v-bind:parentsg="parentsg"></child>
<!-- 直接绑定根数据text ，但是必须指明根数据的路径shou.text-->
<todo-item v-bind:todo="todo"></todo-item>
</div>
<div id="counter-event-example">
<p>{{childtofather}}</p>
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script >
// 注册
Vue.component('child', {
props: ['parentsg'],
template: '<span>{{ parentsg}}</span>'
})
Vue.component('todo-item', {
props: ['todo'],
template: '<p>{{todo.isComplete}}</p>'
})

// 创建根实例
new Vue({
el: '#example',
data:{

parentsg:'',
todo: {
text: 'Learn Vue',
isComplete: false
},
shou: {
text: 'shi wo ma',
isComplete: false
}

}

})

Vue.component('button-counter', {
template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},

// 绑定了事件click————>increment

// 然后 this.counter += 1; this.$emit('increment1',this.counter);

// 这边就是触发事件 increment1，参考文献里面有点乱，这边是不是清晰多了

// 然后 <button-counter v-on:increment1="incrementTotal"></button-counter>

// v-on相当于监听吧，就触发 incrementTotal

// 传给父组件的参数 输出// this.counter

// 有没有很清晰，若有理解不对的地方，请指正
methods: {
incrementCounter: function () {
this.counter += 1
this.$emit('increment',this.counter)
}
},
})

new Vue({
el: '#counter-event-example',
data: {
total: 0,
childtofather:''
},
methods: {
incrementTotal: function (e) {

this.total += 1;
//输出 this.counter
console.log(e)
//
this.childtofather=e +"子传父传来的数据"
}
}
})
</script>
</html>

vue 组件 子向父亲通信用自定义方法用事件监听的更多相关文章

  1. vue自定义组件添加原生事件监听

    注:全局或局部注册的组件称为子组件,其中声明的组件名称(如下demo中的child)是一个自定义组件 Demo1-直接给父组件添加事件监听 <!DOCTYPE html> <html ...

  2. vue中的事件监听之——v-on vs .$on

    跟着视频中老师的教学视频学vue的时候,看很多时候都用@(v-on)来监听子级emit的自定义事件,但在bus总线那块,又用.$on来监听bus自身emit的事件,v-on之间似乎相似但又不同,今天对 ...

  3. 关于vue事件监听的一个问题

    由于新工作需要用vue,所以最近接触最多的也是vue,因为之前一直在用react,所以对于vue上手还是很快的.我也尽量找一些他们两个的异同点,除了多了一些辅助用的方法以外,最大的不同应该是对于组件间 ...

  4. vue样式绑定、事件监听、表单输入绑定、响应接口

    1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...

  5. Java Swing实战（四）按钮组件JButton及其事件监听

    接下来为面板添加保存按钮,并为按钮绑定事件监听. /** * @author: lishuai * @date: 2018/11/26 13:51 */ public class WeimingSyn ...

  6. taro 填坑之路（二）taro 通过事件监听 实现组件间传值

    1.组件传值的方式 2.事件监听原理 3.事件管理器 utils/event.js /** * 事件池(事件管理器) * 通过事件监听传值 */ class Event { constructor() ...

  7. 【winform】基于UserControl实现webBrower组件时html页面元素加载及onclick事件监听实现

    [背景]基于System.Windows.Forms.UserControl实现的webBrower组件在html内使用window.external调用winform事件失败. [解决思路]借助wi ...

  8. Vue 事件监听实现导航栏吸顶效果（页面滚动后定位）

    Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...

  9. 第34天学习打卡（GUI编程之组件和容器 frame panel 布局管理 事件监听 多个按钮共享一个事件 ）

    GUI编程 组件 窗口 弹窗 面板 文本框 列表框 按钮 图片 监听事件 鼠标 键盘事件 破解工具 1 简介 GUi的核心技术:Swing AWT 1.界面不美观 2.需要jre环境 为什么要学习GU ...

随机推荐

  1. 【HNOI2015】菜肴制作

    题面 题解 这道题目首先可以想到拓扑排序,但是肯定不是字典序最小的排列. 比如说,有\(4\)种菜,限制为\(2 \to 4, 3 \to 1\),那么如果求字典序最小的排列会算出\((2, 3, 1 ...

  2. underscore.js 分析6 map函数

    作用:通过转换函数(iteratee迭代器)映射列表中的每个值产生价值的新数组.iteratee传递三个参数:value,然后是迭代 index. _.map([1, 2, 3], function( ...

  3. 神器 Tmux 的超绝便利

    服务器的任务不间断运行,就是利用了 tmux 的特性.就是说,一般 ssh 是断开就会停止所有之前连接 ssh 期间运行的所有 processes,而 tmux 的核心业务不在于把屏幕分成几块好看,而 ...

  4. MySQL数据库引擎、事务隔离级别、锁

    MySQL数据库引擎.事务隔离级别.锁 数据库引擎InnoDB和MyISAM有什么区别 大体区别为: MyISAM类型不支持事务处理等高级处理,而InnoDB类型支持.MyISAM类型的表强调的是性能 ...

  5. 云计算时代，传统企业 IT 从业者如何做好转型?

    本文来源于国外社区 DZone,作者 Dennis O'Reilly 撰写过多篇关于云计算.混合云等内容的文章,本文内容围绕云计算时代,企业纷纷上云,传统 IT 从业者如何做好转型. 本文由“数梦工场 ...

  6. day22 模块-collections，time，random，pickle，shelve等

    一.引入模块的方式: 1. 认识模块 模块可以认为是一个py文件. 模块实际上是我们的py文件运行后的名称空间 导入模块: 1. 判断sys.modules中是否已经导入过该模块 2. 开辟一个内存 ...

  7. 【NLP】使用bert

    # 参考 https://blog.csdn.net/luoyexuge/article/details/84939755 小做改动 需要: github上下载bert的代码:https://gith ...

  8. NABC for Teamproject

     “教育是一个社会发展的支柱, 你和我能看到并理解这个博客, 教育功不可没. 高等教育的形式并不是一成不变的, 高等教育一直在演进.”邹欣老师在博客上如此写道.为了迎合信息化时代的特色,网络上的知识传 ...

  9. JAVA第一次实验 ——凯撒密码

    课程:Java程序设计 班级:1352 姓名:黄伟业 学号:20135215 成绩:            指导教师:娄嘉鹏  实验日期:2015.4.15 实验密级: 预习程度:  实验时间:19: ...

  10. 20135316王剑桥 linux第三周课实验笔记

    通过使用标准的字符码能够对文档中的字母和符号进行编码. 三种重要的数字表现形式: 1. 无符号数:编码基于传统的二进制表示法表示大于或等于零的数字. 2. 补码:编码是表示有符号整数的最常见方法,可以 ...