Vue 组件通信（子组件向父组件传递数据）
1、自定义事件
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<p>总数：{{total}}</p>
<!--自定义事件-->
<my-component @increase='handleGetTotal' @reduce='handleGetTotal'></my-component> </div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
Vue.component('my-component', {
//下面两种都是处理为多行字符串 // template: '\
// <div>\
// <button @click="handleIncrease">+1</button>\
// <button @click="handleReduce">-1</button>\
// </div>',
template: `
<div>
<button @click="handleIncrease">+1</button>
<button @click="handleReduce">-1</button>
</div>`,
data: function() {
return {
counter: 0
}
},
methods: {
handleIncrease: function() {
this.counter++;
this.$emit('increase', this.counter)
},
handleReduce: function() {
this.counter--;
this.$emit('reduce', this.counter)
}
}
})
new Vue({
el: "#app",
data: {
total: 0
},
methods: {
handleGetTotal: function(total) {
this.total = total;
}
}
})
</script>
</body> </html>
2、v-model
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<p>总数：{{total}}</p>
<my-component v-model='total'></my-component> </div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
Vue.component('my-component', {
template: `<button @click="handleClick">+1</button>`,
data: function() {
return {
counter: 0
}
},
methods: {
handleClick: function() {
this.counter++;
this.$emit('input', this.counter)
}
}
})
new Vue({
el: "#app",
data: {
total: 0
}
})
</script>
</body> </html>
Vue 组件通信（子组件向父组件传递数据）的更多相关文章
- Vue父子组件通信（父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问）
Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...
- 【VUE】6.组件通信（一）父组件向子组件传值
1. 前提&知识点 1./components/Father.vue 是父组件, Son.vue 是子组件 2.父组件像子组件通信 props 2.组件通信 1. 新增一个路由入口 /fath ...
- Vue子页面给父页面传递数据
子页面: <template> <div> <p>子组件</p> <button @click="sendMsg">传递 ...
- vue第八单元(组件通信 子父，父子组件通信 自定义事件 事件修饰符 v-model props验证 )
第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...
- vue子组件使用自定义事件向父组件传递数据
使用v-on绑定自定义事件可以让子组件向父组件传递数据,用到了this.$emit(‘自定义的事件名称’,传递给父组件的数据) <!DOCTYPE html> <html lang= ...
- Vue的父子组件v-model双向绑定，父组件修改子组件中绑定的v-model属性
先来看下实现的效果,父组件中有个文本框,在点击下面按钮时弹出抽屉,抽屉里也有个文本框,文本框里的初始值要和父组件的文本框同步,并且修改抽屉里的文本框值时 父组件里的文本框值也要跟着改变 网上有大概三种 ...
- react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)
第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参) #课程目标 1.梳理react组件之间的关系 2.掌握父子传值的方法 3.掌握子父传值的方法 ...
- vue组件之间的通信以及如何在父组件中调用子组件的方法和属性
在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...
- Vue学习笔记-组件通信-子传父（自定义事件）
props用于父组件向子组件传递数据,还有一种比较常见的是子组件传递数据或事件到父组件中.我们应该如何处理呢?这个时候,我们需要使用自定义事件来完成.什么时候需要自定义事件呢?当子组件需要向父组件传递 ...
- 【前端vue开发】vue子调父 $emit (把子组件的数据传给父组件)
ps:App.vue 父组件 Hello.vue 子组件 <!--App.vue :--> <template> <div id="app"> ...
随机推荐
- 25、Flask实战第25天：项目结构搭建
创建一个虚拟环境bbs,并安装flask框架 #cmd进入DOS窗口 mkvirtualenv bbs pip install flask 在本地磁盘D新建项目目录:bbs 打开pycharm,创建f ...
- [UOJ217]奇怪的线段树
如果一个节点是$0$但它子树内有$1$那么无解,否则我们只需把那些是$1$但子树内没有其他$1$的节点(这些区间是被定位的区间)都访问一遍即可 根据ZKW线段树定位区间的过程,可以发现一段(从左到右) ...
- 【哈希】CDOJ1717 京电的神秘矩阵
对每个矩阵里的元素用两个大素数做双关键字哈希,丢进set即可. #include<cstdio> #include<iostream> #include<set> ...
- 使用 Google Code Prettify 实现代码高亮
今天这篇文章主要讲述使用 google-code-prettify 来实现代码的高亮显示,以前我使用 highlight.js 来实现文章中代码的高亮显示. prettify 非常小巧且配置简单,使用 ...
- CentOS 6.9下配置安装KVM
注意:KVM一切安装和运行都是在root用户下完成的,并且只有root才能支持某些软件. 一.准备工作: 1.查看系统版本.内核版本 ##查看系统版本 # cat /etc/redhat-releas ...
- 明尼苏达推荐系统导论（第一课 欢迎来到RS）
一.RS介绍 1.显示评分:直接从用户来 隐式评分:从用户活动推测得到的 2.预测是偏好的估计,是预测缺失值,推荐是从其他用户推荐项目,是推荐感兴趣的项目. 3.协同表示利用其它用户的数据 二.欢迎来 ...
- 查看Ubuntu服务器的版本信息
第一种: uname -a 第二种: cat/etc/issue 第三种: lsb_release -a 这个查看的信息更加详细 使用命令:cat /proc/version 查看 proc目录下记录 ...
- 如何提高iOS开发能力
① 阅读技术博客 在现在这个年代,博客的风头早已被微博盖过.但是每天早上上班后的半小时,一定是打开博客,其中有讨论技术的,也有总结个人的相关经历,读完后肯定会有所收获.阅读博客,还有一个原因是技术博客 ...
- Spring WebSocket入门(一) 转载
本文转载自:http://www.jianshu.com/p/60799f1356c5 WebSocket是html5带来的一项重大的特性,使得浏览器与服务端之间真正长连接交互成为了可能,这篇文章会带 ...
- webService 三要素
WebService(jax-ws)三要素 SOAP: 基于HTTP协议,采用XML格式,用来传递信息的格式. WSDL: 用来描述如何访问具体的服务.(相当于说明书) UDDI: 用户自己可以按UD ...