vue 父子通信过程
1、概述
每个 Vue 实例都实现了事件接口，即：
- 使用
$on(eventName)监听事件 - 使用
$emit(eventName, optionalPayload)触发事件
2、示例一（未传递数据）
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>vue 父子通信过程（未传递数据）</title>
</head> <body>
<div id="root">
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript">
Vue.component('button-counter', {
template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
data: function() {
return {
counter: 0
}
},
methods: {
incrementCounter: function() {
this.counter += 1
this.$emit('increment')
}
},
});
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function() {
this.total += 1
}
}
});
</script>
</body> </html>
3、示例二（传递数据）
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>vue 父子通信过程（传递数据）</title>
</head> <body>
<div id="root">
<div id="message-event-example" class="demo">
<p v-for="msg in messages">{{ msg }}</p>
<button-message v-on:message="handleMessage"></button-message>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript">
Vue.component('button-message', {
template: `<div>
<input type="text" v-model="message" />
<button v-on:click="handleSendMessage">Send</button>
</div>`,
data: function() {
return {
message: 'test message'
}
},
methods: {
handleSendMessage: function() {
this.$emit('message', {
message: this.message
})
}
}
}) new Vue({
el: '#message-event-example',
data: {
messages: []
},
methods: {
handleMessage: function(payload) {
this.messages.push(payload.message)
}
}
})
</script>
</body> </html>
vue 父子通信过程的更多相关文章
- vue父子通信的基本使用
项目中没怎么用过父子通信,很多页面都是路由切换实现的,后来做首页的时候发现首页的路径没法配置,我强行在原先的首页上写了个子组件,通过判断路径使其强行跳转实现的 这个时候跳转页面的时候就要使用到了父子间 ...
- vue 父子通信
节制地使用 $parent 和 $children - 它们的主要目的是作为访问组件的应急方法.更推荐用 props 和 events 实现父子组件通信
- vue父子通信
首先在组件创建中创建子组件Todos.vue <template> <div class="hello"> <h1>todos show< ...
- 【转】vue父子组件之间的通信
vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...
- vue父子组件通信高级用法
vue项目的一大亮点就是组件化.使用组件可以极大地提高项目中代码的复用率,减少代码量.但是使用组件最大的难点就是父子组件之间的通信. 子通信父 父组件 <template> <div ...
- angular,vue,react的父子通信
父子通信 父传子 vue: 父组件:<child :msg="datamsg" ></child> //子组件的msg属性上加数据,datamsg是数据 子 ...
- vue 父子组件通信详解
这是一篇详细讲解vue父子组件之间通信的文章,初始学习vue的时候,总是搞不清楚几个情况 通过props在父子组件传值时,v-bind:data="data",props接收的到底 ...
- vue之非父子通信
一.非父子通信: 思路: 找个中间存储器,组件一把信息放入其中,组件二去拿 代码如下: let hanfei = new Vue(); # 实列化个空的vue对象,作为中间存储器来时间 ...
- vue第九单元(非父子通信 events 单向数据流)
第九单元(非父子通信 events 单向数据流) #课程目标 了解非父子组件通信的原理,熟练实现非父子组件间的通信(重点) 了解单向数据流的含义,并且明白单向数据流的好处 #知识点 #1.非父子组件间 ...
随机推荐
- [ZJOI2014][bzoj3527]力 [FFT]
题面 传送门 思路 把要求的公式列出来: $E_i=\frac{F_i}{q_i}=\sum_{j=1}^i\frac{q_j}{\left(i-j\right)^2}-\sum_{j=i+1}^n\ ...
- border-radius元素overflow:hidden失效问题
父元素使用border-radius和overflow:hidden做成圆形,子元素如果使用了transform属性,则父元素的overflow:hidden会失效. 解决方法: 父元素使用 -wei ...
- How to use rowspan and colspan in tbody using datatable.js?
https://stackoverflow.com/questions/27290693/how-to-use-rowspan-and-colspan-in-tbody-using-datatable ...
- python转exe2
转载自 xiake200704 最终编辑 xiake200704 一.简介 py2exe是一个将python脚本转换成windows上的可独立执行的可执行程序(*.exe)的工具,这样,你 ...
- about coroutine
co 有协作的意思,是让多个 routine 合作来完成某件或者某几件事情,它主要解决的问题就是合理安排一些耗时长的工作的执行时间,让其他的工作有机会得到执行.
- 【HDOJ5956】The Elder（树形DP，斜率优化）
题意:有一棵n个点的有根树,每条边上有一个边权.给定P,从i跳到它的祖先j的费用是距离的平方+P,问所有点中到根节点1的总花费最大值 n<=1e5,p<=1e6,w<=1e2 思路: ...
- 呵呵呵呵。。。系统还原了，终于可以用IE登陆百度了
原文发布时间为:2009-12-19 -- 来源于本人的百度文章 [由搬家工具导入] 呵呵呵呵。。。今天终于有时间把系统还原了，终于可以用IE登陆百度了
- CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅
首页 登录注册 CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅 阅读 8113 收藏 927 2017-09-26 原文链接:github.com 腾讯云容器服务CSS,立 ...
- The C programming language [book]
1 A12.3 Macro Definition and Expansion A control line of the form #define identifier token-sequence ...
- kafka术语
kafka 架构Terminology(术语) broker(代理) Kafka集群包含一个或多个服务器,这种服务器被称为broker Topic 每条发布到Kafka集群的消息都有一个类别,这个类 ...