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.非父子组件间 ...
随机推荐
- Chrome DevTools & performance optimization
Chrome DevTools & performance ptimization https://www.bing.com https://developers.google.com/web ...
- 【bzoj2836】魔法树 树链剖分+线段树
题目描述 输入 输出 样例输入 4 0 1 1 2 2 3 4 Add 1 3 1 Query 0 Query 1 Query 2 样例输出 3 3 2 题解 树剖+线段树模板题,不过为什么写的人这么 ...
- 【bzoj4825】[Hnoi2017]单旋 线段树+STL-set
题目描述 H 国是一个热爱写代码的国家,那里的人们很小去学校学习写各种各样的数据结构.伸展树(splay)是一种数据结构,因为代码好写,功能多,效率高,掌握这种数据结构成为了 H 国的必修技能.有一天 ...
- input[type="radio"]自定义样式
input为radio时,虽然会有默认选中的样式,但是并不符合大多数项目的需求,我们的目标是可以随心所欲自定义它的样式.怎么做呢?其实很简单,只要抓住3点.分别是1.label 2.隐藏自带样式 3. ...
- location.origin兼容
if (!window.location.origin) { window.location.origin = window.location.protocol + "//" + ...
- .NET发布网站出现了一系列问题（1）---“无法显示XML页”的解决办法
原文发布时间为:2008-09-11 -- 来源于本人的百度文章 [由搬家工具导入] 原因之一： 这种错误是由asp.net 帐户没有在iis注册造成的。原因可能是.net framework 2.0 ...
- 语法错误: 标识符“__RPC__out_xcount_part” 解决方法
1.错误描述 2.解决方案:将 $(DXSDK_DIR)\Include; 放到最后面,如下
- C++中的explicit关键字（转）
按默认规定,只用传一个参数的构造函数也定义了一个隐式转换.举个例子: #pragma once class CExample { public: CExample(void); CExample(); ...
- token in c and cpp (C preprocessor)
C tokens are of six types, They are, keyword identifier constant string-literal punctuator preproces ...
- [SaltStack] Crontab部署
salt.states.cron 接着早上安静的时间, 在这里梳理下crontab相关的东东, 主要是crontab的统一管理维护, 包括新增, 修改, 下线等等. 下面就详细看下crontab的sl ...