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"> ...
随机推荐
- 牛刀小试之Django二
model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接数据库,并编写数据访问层代码 业务逻辑层去调用数据访问层执行 ...
- Flask实战第53天：cms编辑轮播图功能完成
后端逻辑 表单验证, 这里编辑就是和添加的内容一样,所以可以直接继承添加轮播图的表单验证,然后多加一个轮播图的id即可 编辑cmd.forms.py class UpdateBannerForm(Ad ...
- Xamarin.Forms教程下载安装Visual Studio 2015
Xamarin.Forms教程下载安装Visual Studio 2015 下载安装Visual Studio 2015 Visual Studio 2015是微软提供的IDE,其中集成了Window ...
- [NOI2016]循环之美(杜教筛)
首先要求每个数互不相等,故有$x\perp y$. 可以发现$\frac{x}{y}$在$k$进制下为纯循环小数的充要条件为$x\cdot k^{len}\equiv x(mod\ y)$,即$y\p ...
- BZOJ 1123 [POI2008]BLO（Tarjan算法）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1123 [题目大意] Byteotia城市有n个towns,m条双向roads. 每条r ...
- 【推导】【数学期望】Gym - 101237D - Short Enough Task
按照回文子串的奇偶分类讨论,分别计算其对答案的贡献,然后奇偶分别进行求和. 推导出来,化简一下……发现奇数也好,偶数也好,都可以拆成一个等比数列求和,以及一个可以错位相减的数列求和. 然后用高中数学知 ...
- git远程仓库创建及权限管理（一）单个项目
最近接手公司git权限管理,既然负责此事个人觉得应该深入学习下,不仅为当前工作也为进一步发展.网上查找了一番,找到了完整的教程,所以这里不再一步一步描述,具体链接已给出,本文只对操作过程中遇到的问题的 ...
- 随机数选择器 Exercise07_13
import java.util.Scanner; /** * @author 冰樱梦 *时间:2018年下半年 *题目:随机数选择器 */ public class Exercise07_13 { ...
- 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 ...
- python笔记14-读取yaml配置文件(pyyaml)
yaml简介 1.yaml [ˈjæməl]: Yet Another Markup Language :另一种标记语言.yaml 是专门用来写配置文件的语言,非常简洁和强大,之前用ini也能写配置文 ...