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.非父子组件间 ...
随机推荐
- [POJ2942][LA3523]Knights of the Round Table
[POJ2942][LA3523]Knights of the Round Table 试题描述 Being a knight is a very attractive career: searchi ...
- 【距离GDOI：136天】 后缀数组中...
当时后缀数组没有好好学...各种应用都没学,这两天好好补,要把罗神的论文好好研究一遍...其实后缀数组真的好神奇!!特别是那个萌萌的height数组! 今天终于能有两节完整的晚自修了QAQ...明晚还 ...
- JavaScript (JS)基础：ECMAScript 浅析 (含Math基本方法解析)
浏览器端JavaScript的组成 ECMAScript:语法规范 DOM:Document Object Model 文档对象模型,操作页面元素 BOM:Browser Object Model ...
- android中与Adapter相关的控件----ListView
ListView讲解: 一.ListView这个控件是一个使用非常广泛的控件,值得深入的学习和研究.基本使用已经在Adapter中使用过了 二.常用的属性和方法 footerDividersEnabl ...
- function in Postgres
CREATE or REPLACE FUNCTION fn_attr_category() RETURNS void AS $BODY$ declare v_tmp_rec record; begin ...
- (11)centos之vim使用
ZZ 保存并退出 :x 保存并退出 :q 不保存退出
- Java 大数(整数+浮点数) 基本函数
import java.math.BigDecimal; import java.math.BigInteger; import java.util.*; public class Main { pu ...
- 关于npm无法安装依赖包以及安装包缓慢的解决方法
因为npm的服务器在国外,导致我们使用npm安装第三方包缓慢.而且有的第三方包是被墙的. 因此,作为墙内人,必须解决这个问题,否则开发起来实在是太坑了! 推荐大家使用淘宝的镜像(cnpm),它以每10 ...
- iOS7自定义back按钮和pop交互手势
Clambake for iPhone有一个回退按钮在所有的导航条上.这是一个简单的没有文字箭头. 实现一个自定义按钮是简单的.类似这个设置controller 的navigationItem一个le ...
- ios开发 - 获取从http上下载文件的大小
- (void)connectionNSURLConnection *)connection didReceiveResponseNSURLResponse *)response{ NSHTTPURL ...