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"> ...
随机推荐
- SpringBoot整合SpringSecurity简单实现登入登出从零搭建
技术栈 : SpringBoot + SpringSecurity + jpa + freemark ,完整项目地址 : https://github.com/EalenXie/spring-secu ...
- HDU 6065 RXD, tree and sequence （LCA DP）
RXD, tree and sequence Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 524288/524288 K (Java ...
- WHERE 子句中的标量子查询
标量子查询不仅可以用在SELECT 语句的列表中,它还可以用在WHERE 子句中,而且实际应用中子查询很多的时候都是用在WHERE子句中的. 先来看一个简单的例子,我们要检索喜欢“Story”的读者主 ...
- codevs 1014 装箱问题 2001年NOIP全国联赛普及组
题目描述 Description 有一个箱子容量为V(正整数,0<＝V<＝20000),同时有n个物品(0<n<＝30),每个物品有一个体积(正整数). 要求n个物品中,任取若 ...
- Codeforces Round #476 (Div. 2) [Thanks, Telegram!] ABCDE
修仙场,没脑子,C边界判错一直在写mdzz..D根本没怎么想. 第二天起来想了想D这不是水题吗立马A了.看了看E一开始想分配问题后来发觉想岔了,只需要每次都把树最后分配的点移到最前面就好了. A. P ...
- 【推导】【暴力】Codeforces Round #432 (Div. 2, based on IndiaHacks Final Round 2017) C. Five Dimensional Points
题意:给你五维空间内n个点,问你有多少个点不是坏点. 坏点定义:如果对于某个点A,存在点B,C,使得角BAC为锐角,那么A是坏点. 结论:如果n维空间内已经存在2*n+1个点,那么再往里面添加任意多个 ...
- 【递推】【推导】【乘法逆元】UVA - 11174 - Stand in a Line
http://blog.csdn.net/u011915301/article/details/43883039 依旧是<训练指南>上的一道例题.书上讲的比较抽象,下面就把解法具体一下.因 ...
- BUG：php7.1 访问yii数据库 自动加端口3306 报错
跟新完php7.1后访问yii项目出现下图错误 可见数据库链接是已经制指定了端口号9004 但是访问时后续自动加上了3306 原因:换了方式 //这种方式只支持5.6版本php 'db' => ...
- centos svnversion安装部署
第一步: yum install subversion; 第二步: mkdir /data/svn/conf mkdir /data/svn/library 第三步: svnadmin create ...
- [转]MySQL创建用户与授权方法
注:我的运行环境是widnows xp professional + MySQL5.0 一, 创建用户: 命令:CREATE USER 'username'@'host' IDENTIFIED BY ...