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"> ...
随机推荐
- js数组，在遍历中删除元素
/** * 有效的方式 - 改变下标,控制遍历 */ for (var i = 0; i < arr.length; i++) { if (...) { arr.splice(i, 1); // ...
- 洛谷——P1748 H数
P1748 H数 题目背景 无 题目描述 所谓H数,是指只含有2,3,5,7这些质因数的数,如630是H数,而22不是.现在要求输出第n个H数,为了方便起见将H[1]定为1.已知n不超过10000,最 ...
- Find K Pairs with Smallest Sums -- LeetCode
You are given two integer arrays nums1 and nums2 sorted in ascending order and an integer k. Define ...
- [Nescafé41]异化多肽(多项式求逆元)
2015年的题,应该是将形式幂级数引入国内的元老级题目. 大意:给定一个大小为m的正整数序列和n,问有多少种选法可以凑成n,每个数可以选多次,种类不同算不同方案.$n,m,C \leqslant 10 ...
- 【动态规划】Round Subset
CF837D. Round Subset Let's call the roundness of the number the number of zeros to which it ends. Yo ...
- 20162318 2016-2017-2《Java程序设计》课堂实践项目
20162318 2016-2017-2<Java程序设计>课堂实践项目 String类的使用 在String类中有一种split的方法.它可以把字符串分割为好几个小的字符串. 实践内容: ...
- [洛谷P3809]【模板】后缀排序
[洛谷P3809][模板]后缀排序 题目大意: 对于给定的长度为\(n(n\le10^6)\)的字符串求后缀数组\(sa[i]\). 思路: 倍增+快排构造后缀数组.代码参考<挑战程序设计竞赛& ...
- MySql数据库理解
在之前的面试过程中,有被问到很多次,关于MySQL数据库相关知识,其中有问到了解存储引擎,数据库优化等问题,问得一脸懵X,确实以前在学习的时候没有去深入了解过这一块儿,今天找到了相应的数据库视频,稍稍 ...
- TZOJ 数据结构实验--循环队列
描述 创建一个循环队列,队列元素个数为4.能够实现队列的初始化.入队列.出队列.求队列长度等操作. 循环队列数据类型定义如下: typedef struct{ int data[Max]; in ...
- 8VC Venture Cup 2016 - Elimination Round F. Group Projects dp
F. Group Projects 题目连接: http://www.codeforces.com/contest/626/problem/F Description There are n stud ...