<!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的理解的更多相关文章

  1. 对Vue.js $watch方法的理解

    博主最近对着vue.js的官方教程在自学vue.js,博主自幼愚钝,在教程中真的是好多点都不太理解,接下来要说的这个$watch方法就是其中一个不太理解的点了.咱们先来看一下对于$watch方法在vu ...

  2. 关于vue.js中slot的理解

    slot这块看官网文档,起初有点不懂,仔细研究还是最终理解了,slot是用来干嘛的呢,先看下一个例子: <script src="https://unpkg.com/vue/dist/ ...

  3. Vue.js 从源码理解v-for和v-if的优先级的高低

    在vue.js里面,v-for和v-if是可以一起使用作用在某个元素上,网上看到一篇文章说永远不要把v-for和v-if同时用在同一个元素上,感觉有点瞎扯,官网也注明了可以一起使用的,还把两个指令的优 ...

  4. Vue.js中 watch的理解以及深度监听

    如代码: <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type=" ...

  5. Vue.js学习笔记（1）

    数据的双向绑定(ES6写法) 效果: 没有改变 input 框里面的值时

  6. Vue.js：轻量高效的前端组件化方案

    转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...

  7. Vue.js：轻量高效的前端组件化方案（转载）

    摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue ...

  8. Angular和Vue.js 深度对比

    Vue.js 是开源的 JavaScript 框架,能够帮助开发者构建出美观的 Web 界面.当和其它网络工具配合使用时,Vue.js 的优秀功能会得到大大加强.如今,已有许多开发人员开始使用 Vue ...

  9. Angular和Vue.js

    Angular和Vue.js Vue.js 是开源的 JavaScript 框架,能够帮助开发者构建出美观的 Web 界面.当和其它网络工具配合使用时,Vue.js 的优秀功能会得到大大加强.如今,已 ...

随机推荐

  1. 1.3.1 apache的配置（下）

    (1)httpd.conf的配置 使用文本编辑工具(推荐使用Editplus.UltraEdit等工具),打开httpd.conf. 其中,行首为#的部分为注释部分,不会被apache服务器程序进行读 ...

  2. Spirent Tester二层裸流配置

    1.OLT配置 配一个VLAN,若GE口打Tag,不需要打PVID,打Untag,配PVID. 在ONU上配一个Other Bridge Wan链接. 2.TestCenter配置 选定两个TestC ...

  3. C语言中字符串详解

    C语言中字符串详解 字符串时是C语言中非常重要的部分,我们从字符串的性质和字符串的创建.程序中字符串的输入输出和字符串的操作来对字符串进行详细的解析. 什么是字符串? C语言本身没有内置的字符串类型, ...

  4. Memory Networks02 记忆网络经典论文

    目录 1 Recurrent Entity Network Introduction 模型构建 Input Encoder Dynamic Memory Output Model 总结 2 hiera ...

  5. 从Android手机的抢红包插件说起

    前语 最近,Android手机上的手机管家更新了新版本,提供了红包闹钟功能,只要有微信红包或者QQ红包,就会自动提醒.恰逢最近又在做UI自动化的工作,使用到UI Automator框架.几行代码,就可 ...

  6. 修饰符static和abstract

    修饰符static和abstract static static可以修饰类中的方法,属性等,被修饰后的方法和属性可以通过类名直接调用也可以通过对象调用.普通的变量只能通过对象进行调用. 静态方法直接可 ...

  7. mobx 的学习

    1.初始化项目 第一步用create-react-app初始化一个项目,并打开webpack配置项 npx create-react-app react-mobx-demo cd react-mobx ...

  8. JVM笔记--如果你写JVM，最需要考虑的重要结构是什么？

    开局一张图,前面已经从每一部分解析过JVM的内存结构了,现在按照顺序来分析: 整体上来看:类文件从类加载子系统,加载完成之后,主要存放在方法区(JRockit和H9没有方法区,这里指的是HotSpot ...

  9. kettle 执行 kjb 临时文件夹 /tmp permission denied 问题

    编写完的 kettle job (kjb文件) 放在服务器上执行的时候出现了奇怪的错误: # 执行 kjb ./kitchen.sh -file:/opt/code/ods/ods_inc.kjb # ...

  10. MyBatis简单的CRUD操作

    Dao接口 package com.ttpfx.dao; import com.ttpfx.domain.User; import java.util.List; public interface U ...