父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,就需要使用自定义事件!

我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface),即:

  •     使用 $on(eventName) 监听事件
  •     使用 $emit(eventName) 触发事件

另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

以下实例中子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
</div> <script>
Vue.component('button-counter', {
template: '<button v-on:click="increment">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
increment: function () {
this.counter += 1
this.$emit('increment')
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
})
</script>
</body>
</html>

效果如图:

VueJS组件通过props自定义事件的更多相关文章

  1. vue组件-子组件向父组件传递数据-自定义事件

    自定义事件 我们知道,父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,应该怎样做?那就是自定义事件!

  2. vue第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 )

    第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...

  3. Vue基础-自定义事件的表单输入组件、自定义组件的 v-model

    Vue 测试版本:Vue.js v2.5.13 学习 Vue 的自定义事件的表单输入组件,觉得文档讲的不太细致,所以这里再细化一下: 如果不用 v-model,代码应该是这样: <myinput ...

  4. Vue学习笔记-组件通信-子传父(自定义事件)

    props用于父组件向子组件传递数据,还有一种比较常见的是子组件传递数据或事件到父组件中.我们应该如何处理呢?这个时候,我们需要使用自定义事件来完成.什么时候需要自定义事件呢?当子组件需要向父组件传递 ...

  5. Vue3手册译稿 - 深入组件 - 自定义事件

    本章节需要掌握组件基础 emit我译成发射,觉得发射这个词比较形象的形容将子组件事件发射出来的一个动作. 事件名 像组件和props,事件名也会进行自动转换,如果你在子组件里发射一个驼峰命名的事件,你 ...

  6. Vue 自定义事件 && 组件通信

    1 App.vue 2 <template> 3 <!-- 4 组件的自定义事件: 5 1.一种组件间通信的方式,使用于:子组件===>父组件 6 2.使用场景:A是父组件,B ...

  7. Vue学习之--------组件自定义事件(绑定、解绑)(2022/8/21)

    文章目录 1.基础知识 2.代码实例 2.1 App.vue 2.2 school.vue 2.3 student.vue 3.测试效果(略) 4.实际应用(在组件化编码实战三的基础上改进) 4.1 ...

  8. vue 父子组件通信props/emit

    props 1.父组件传递数据给子组件 父组件: <parent> <child :childMsg="msg"></child>//这里必须要 ...

  9. Angular4.x Event (DOM事件和自定义事件)

    Angular组件和DOM元素通过事件与外部进行通信,两者中的事件绑定语法是相同的-(eventName)="expression": <button (click)=&qu ...

随机推荐

  1. bzoj3680吊打GTY

    题意:http://www.lydsy.com/JudgeOnline/problem.php?id=3680 sol  :吊打出题人(逃~ puts("nan") 出题人题解:h ...

  2. shell变量的数值计算

    shell中常见的算术运算命令如下 1.(())  用于整数运算的常用运算符,效率很高 2.let 用于整数运算,类似于  (()) 3.expr  可用于整数计算,但还有很多其他的额外功能 4.bc ...

  3. NodeJS学习(1)--- 安装配置介绍

    Node.js 安装配置 本章节我们将向大家介绍在window和Linux上安装Node.js的方法. 本安装教程以Node.js v6.10.1 LTS(长期支持版本)版本为例. Node.js安装 ...

  4. ios工程中一天只让显示一次的广告,或是弹出窗,如何实现

    需求: 产品 代码实现: 在首页.m中 //一天之内只能批量邀请一次 NSUserDefaults *userDefault = [NSUserDefaults standardUserDefault ...

  5. mybatis 从数据库查询的信息不完整解决办法

    List<Product> products = productService.getProductListWithPage(productQuery); 今天碰到一个很奇怪的现象,上面的 ...

  6. 【linux命令】lscpu,/etc/cpuinfo详解

    lscpu  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 i2000:~ # lscpu Architecture:        ...

  7. HttpClient 简介与使用

    Http协议的重要性相信不用我多说了,HttpClient相比传统JDK自带的 URLConnection,增加了易用性和灵活性(具体区别,日后我们再讨论),它不仅是客户端发送Http请求变得容易,而 ...

  8. Spy++使用方法

    原文转自 http://jingyan.baidu.com/article/3a2f7c2e76584a26aed61174.html 1.Spy++ 是Visual Studio 自带的工具(菜单& ...

  9. AC日记——[中山市选2009]谁能赢呢? bzoj 2463

    2463 思路: 博弈: 把先手和后手的走的两个格子看做一个1*2的方格: 如果n为偶数,那么棋盘一定可以被1*2的方格覆盖: 前端为先手,后端为后手: 那么,当还剩下一个1*2的方格时,先手一定可以 ...

  10. (5)ASP.NET HTML服务器控件

    工具箱 与服务端交互 <body> <form id="form1" runat="server"> <div> <% ...