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"> ...
随机推荐
- POJ1704 Georgia and Bob 博弈论 尼姆博弈 阶梯博弈
http://poj.org/problem?id=1704 我并不知道阶梯博弈是什么玩意儿,但是这道题的所有题解博客都写了这个标签,所以我也写了,百度了一下,大概是一种和这道题类似的能转换为尼姆博弈 ...
- hdu 4747 Mex( 线段树？ 不，区间处理就行（dp？））
Mex Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others)Total Submis ...
- 【图论】Self-Assembly(6-19)
[UVA1572]Self-Assembly 算法入门经典第6章6-19(P172) 题目大意:有一些正方形,每条边上都有A-~Z- A+~Z+的编号,或者00,A+的边可以拼A-,反之亦然.00的边 ...
- [BZOJ5267]特工
一个套路题...但还是得写一下这个套路避免以后忘了 题目中的运算$f(i,j)=(i|j)\text^i$对单位二进制满足$f(0,0)=f(1,0)=f(1,1)=1,f(0,1)=0$ 先考虑求正 ...
- 【bitset】【推导】hdu5961 传递
<法一>http://blog.csdn.net/u014325920/article/details/53046890 1.判断传递的条件为:若G中有 一条边从a到b且有一条边从b到c ...
- css样式介绍
1 css之选择器 1.1 基本选择器 1.2 组合选择器 E,F 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔:div,p { color:#f00; } E F ...
- Problem D: 零起点学算法95——弓型矩阵
#include<stdio.h> #include<string.h> int main() { ][]; while(scanf("%d%d",& ...
- CF 256C Furlo and Rublo and Game【博弈论，SG函数】
暴力的求SG函数会超时,正解是先处理出10^6以内的SG值,对于更大的,开根号之后计算出. 小数据观察可以发现sg函数值成段出现,而且增长速度很快,因此可以计算出来每一段的范围,只需打表即可. Nim ...
- YS动态口令系统接入流程
动态口令是保护用户账户的一种常见有效手段,即用户进行敏感操作(比如登录)时,需要用户提供此动态生成的口令做二次身份验证,假设用户的口令被盗,如果没有动态口令,也无法进行登录或进行敏感操作,保护了用户的 ...
- java自带的jvm分析工具
http://domark.iteye.com/blog/1924302 这段时间觉得很有必要对java的内存分析工具进行熟悉,这样以后出现机器负载较高,或者反应很慢的时候,我就可以查找原因了.上 ...