vue.js中$emit的理解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去则使用自定义事件！-->
<div id="app">
<p>{{total}}</p>
<button-counter v-on:increment='incrementTotal'></button-counter>
<button-counter @increment='incrementTotal'></button-counter>
</div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
Vue.component('button-counter',{
template:'<button v-on:click="increment">{{counter}}</button>',
data:function(){
return {
counter:0
}
},
methods:{
increment:function(){
this.counter +=1;
//$emit(‘increment1‘,[12,‘kkk‘])，直接看是懵逼的有没有，可以先告诉你，就是触发自定义事件increment1(或者函数名吧)，[]为参数
this.$emit('increment')
}
}
})
var app = new Vue({
el:'#app',
data:{
total:0
},
methods:{
incrementTotal:function(){
this.total += 1;
}
}
})
</script>
</html>
vue.js中$emit的理解的更多相关文章
- 对Vue.js $watch方法的理解
博主最近对着vue.js的官方教程在自学vue.js,博主自幼愚钝,在教程中真的是好多点都不太理解,接下来要说的这个$watch方法就是其中一个不太理解的点了.咱们先来看一下对于$watch方法在vu ...
- 关于vue.js中slot的理解
slot这块看官网文档,起初有点不懂,仔细研究还是最终理解了,slot是用来干嘛的呢,先看下一个例子: <script src="https://unpkg.com/vue/dist/ ...
- Vue.js 从源码理解v-for和v-if的优先级的高低
在vue.js里面,v-for和v-if是可以一起使用作用在某个元素上,网上看到一篇文章说永远不要把v-for和v-if同时用在同一个元素上,感觉有点瞎扯,官网也注明了可以一起使用的,还把两个指令的优 ...
- Vue.js中 watch的理解以及深度监听
如代码: <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type=" ...
- Vue.js学习笔记（1）
数据的双向绑定(ES6写法) 效果: 没有改变 input 框里面的值时
- Vue.js：轻量高效的前端组件化方案
转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...
- Vue.js：轻量高效的前端组件化方案（转载）
摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue ...
- Angular和Vue.js 深度对比
Vue.js 是开源的 JavaScript 框架,能够帮助开发者构建出美观的 Web 界面.当和其它网络工具配合使用时,Vue.js 的优秀功能会得到大大加强.如今,已有许多开发人员开始使用 Vue ...
- Angular和Vue.js
Angular和Vue.js Vue.js 是开源的 JavaScript 框架,能够帮助开发者构建出美观的 Web 界面.当和其它网络工具配合使用时,Vue.js 的优秀功能会得到大大加强.如今,已 ...
随机推荐
- MySQL：安装与配置
记录一次 MySQL 在Windows系统的安装配置过程 安装MySQL 0.下载社区版安装包 官网下载地址:https://dev.mysql.com/downloads/installer/ 1. ...
- 简单的ssm练手联手项目
简单的ssm练手联手项目 这是一个简单的ssm整合项目 实现了汽车的品牌,价格,车型的添加 ,修改,删除,所有数据从数据库中拿取 使用到了jsp+mysql+Mybatis+spring+spring ...
- windows电脑上传ipa到appstore的详细流程
在使用H5混合开发的app打包后,需要将ipa文件上传到appstore进行发布,就需要去苹果开发者中心进行发布. 但是在苹果开发者中心无法直接上传ipa文件,它要求我们使用xcode或transpo ...
- P2260 [清华集训2012]模积和 【整除分块】
一.题目 P2260 [清华集训2012]模积和 二.分析 参考文章:click here 具体的公式推导可以看参考文章.博主的证明很详细. 自己在写的时候问题不在公式推导,公式还是能够比较顺利的推导 ...
- GreenDao3.2使用详解（增，删，改，查，升级）
首先看一下效果图: 项目结构如下图所示: 第一步:在build中添加配置如下: projet 目录下的build.gradle dependencies { classpath 'org.greenr ...
- ECharts系列 (01)：地图三级下钻
前言 最近项目中用到了地图下钻功能,GitHub上找到了一个轮子 - echarts3-chinese-map-drill-down,启动项目看了一下Demo,动画衔接的很流畅,感觉做的非常棒,膜拜大 ...
- restful设计风格
restful是一种软件设计风格,并不是标准,它只是提供了一组设计原则和约束条件. ① restful 提倡面向资源编程,url接口尽量要使用名词,不要使用动词 ② 在url中可以体现版本号 ③可以根 ...
- 在M1芯片的Mac系统上做.net core开发靠谱吗?
作为一个7年老.NET程序员,最近几年苹果慢慢接替微软,成为我心中最酷的科技公司. 为什么我会选择Mac os作为我的开发环境? 很多做.net的同学都使用Windows系统作为自己的开发环境,我其实 ...
- vue封装公用弹出框方法，实现点击出现操作弹出框
vue封装公用弹出框方法,实现点击出现操作弹出框 如上图所示,这次要实现一个点击出现操作弹框的效果:并将这个功能封装成一个函数,便于在项目的多个地方使用. 具体思路是: 封装一个组件,组件保护一个插槽 ...
- 第一次OOP作业-Blog总结
前言 第一次作业一共八道题,此次作业也是这三次作业中最接近面向过程程序设计的题目集,整体难度偏低,总耗时1.5h,主要的知识点在熟悉Java的语法上,整体题目的逻辑非常清晰简单,但最后一个判断三角形类 ...