vue 组件 子向父亲通信用自定义方法用事件监听
<!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 组件 子向父亲通信用自定义方法用事件监听的更多相关文章
- vue自定义组件添加原生事件监听
注:全局或局部注册的组件称为子组件,其中声明的组件名称(如下demo中的child)是一个自定义组件 Demo1-直接给父组件添加事件监听 <!DOCTYPE html> <html ...
- vue中的事件监听之——v-on vs .$on
跟着视频中老师的教学视频学vue的时候,看很多时候都用@(v-on)来监听子级emit的自定义事件,但在bus总线那块,又用.$on来监听bus自身emit的事件,v-on之间似乎相似但又不同,今天对 ...
- 关于vue事件监听的一个问题
由于新工作需要用vue,所以最近接触最多的也是vue,因为之前一直在用react,所以对于vue上手还是很快的.我也尽量找一些他们两个的异同点,除了多了一些辅助用的方法以外,最大的不同应该是对于组件间 ...
- vue样式绑定、事件监听、表单输入绑定、响应接口
1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...
- Java Swing实战(四)按钮组件JButton及其事件监听
接下来为面板添加保存按钮,并为按钮绑定事件监听. /** * @author: lishuai * @date: 2018/11/26 13:51 */ public class WeimingSyn ...
- taro 填坑之路(二)taro 通过事件监听 实现组件间传值
1.组件传值的方式 2.事件监听原理 3.事件管理器 utils/event.js /** * 事件池(事件管理器) * 通过事件监听传值 */ class Event { constructor() ...
- 【winform】基于UserControl实现webBrower组件时html页面元素加载及onclick事件监听实现
[背景]基于System.Windows.Forms.UserControl实现的webBrower组件在html内使用window.external调用winform事件失败. [解决思路]借助wi ...
- Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)
Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...
- 第34天学习打卡(GUI编程之组件和容器 frame panel 布局管理 事件监听 多个按钮共享一个事件 )
GUI编程 组件 窗口 弹窗 面板 文本框 列表框 按钮 图片 监听事件 鼠标 键盘事件 破解工具 1 简介 GUi的核心技术:Swing AWT 1.界面不美观 2.需要jre环境 为什么要学习GU ...
随机推荐
- 8 功能6:后台管理页面,编辑文章,xss攻击
1.后台管理页面之文本编辑 # 后台管理url re_path(r'^cn_backend/$', views.cn_backend, name='cn_backend'), re_path(r'^c ...
- python之打包、发布模块
一.python中针对于写好的模块,并且比人也可以使用改模块,这样就可以以同意的打出来,让别人安装或者赋值过后可以更好的使用以及集成. 二.最近在学习python所以这里主要是记录一下python的打 ...
- Python_sklearn机器学习库学习笔记(六) dimensionality-reduction-with-pca
# 用PCA降维 #计算协方差矩阵 import numpy as np X=[[2,0,-1.4], [2.2,0.2,-1.5], [2.4,0.1,-1], [1.9,0,-1.2]] np.c ...
- burpsuite 抓取https 证书问题
一定要按照步骤来,先导入burp初始证书到服务器,这时候初始证书是未验证的,然后导出为crt/cer文件(可能拼写错误,总之是正规证书后缀),再导入到机构. 要代理所有类型包括ssl的才能正常导入机构 ...
- [Mark]Windows Server 2008 R2 防火墙之SQL Server 2008 R2
今天新装了一个DBServer (Windows Server 2008 R2),但是在客户端跑之前的应用时却发现出错了,Debugg后发现的错误如下: 由InnerException可知时DB ...
- Python的进阶:copy与deepcopy区别
copy()与deepcopy()之间的区分必须要涉及到python对于数据的存储方式. 首先直接上结论: —–我们寻常意义的复制就是深复制,即将被复制对象完全再复制一遍作为独立的新个体单独存在.所以 ...
- 换新 IP 地址的时候,ORCL前置准备条件
1. 开启虚拟机 ORCL 服务 2. cmd > ipconfig > 3. cmd > lsnrctl status > 4. 主机改配置文件 IP,succes ...
- SpringBoot日记——按钮的高亮和添加篇
场景如下: 我们点击主页,主页那个按钮就高亮: 我们点击员工,员工那个按钮就高亮: 高亮的处理 直接来看代码如何编写: 1.先看一下官方文档如何编写关于参数配置的,等下我们来解释为何这么写: 所以,我 ...
- CSS文本溢出处理方式
1. 单行文本溢出省略号效果 .ellipsis { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } <div cl ...
- 006 --MySQL索引原理
一 .索引的概念? 一般的应用系统,读写比例在10:1左右,而且插入操作和一般的更新操作很少出现性能问题,在生产环境中,我们遇到最多的,也是最容易出问题的,还是一些复杂的查询操作,因此对查询语句的优化 ...