当前位置:网站首页>Event center parameter transfer, peer component value transfer method, brother component value transfer
Event center parameter transfer, peer component value transfer method, brother component value transfer
2022-07-06 20:17:00 【imkaifan】
Parent component :
<template>
<div class="home">
<tom />
<jerray />
</div>
</template>
<script>
// @ is an alias to /src
import Tom from '@/components/eventbus/tom.vue'
import Jerray from '@/components/eventbus/jerray.vue'
export default {
name: 'Home',
components: {
Tom,
Jerray
}
}
</script>
Two sub components at the same level
Catalog :
Event center :
tom:
<template>
<div>
<div>Tom</div>
<div>{
{
num}}</div>
<button @click="handle"> Click on </button>
</div>
</template>
<script>
import eventBus from './eventbus'
export default {
name: 'Tom',
components: {
},
props: {
},
data () {
return {
num: 0,
dataTom: 11111
}
},
watch: {
},
computed: {
},
methods: {
handle () {
eventBus.$emit('jerray-event', this.dataTom)
}
},
created () {
},
mounted () {
// Monitoring events
eventBus.$on('tom-event', (val) => {
this.num = val
})
}
}
</script>
<style lang="less" scoped>
</style>
jerray:
<template>
<div>
<div>jerray</div>
<div>{
{
num}}</div>
<button @click="handle"> Click on </button>
</div>
</template>
<script>
import eventBus from './eventbus'
export default {
name: 'Jerray',
components: {
},
props: {
},
data () {
return {
num: 0,
dataJerray: 222222
}
},
watch: {
},
computed: {
},
methods: {
handle () {
eventBus.$emit('tom-event', this.dataJerray)
}
},
created () {
},
mounted () {
// Monitoring events
eventBus.$on('jerray-event', (val) => {
this.num = val
})
}
}
</script>
<style lang="less" scoped>
</style>
Mechanism thinking
use vue Instance as the event center : In fact, I don't understand this , But it must be useful , oh , He's meow , When I went to get a glass of water, I thought a little , Why? , Because we need to use it $emit To trigger the event , Who has $emit, It must be vue Examples
eventBus.$on Is to add an event to the event center , And then the operation triggered by the event , Be similar to addEventListener usage .
And then use $emit To trigger this event . This is actually very clever , This $emit , How to use it like this , It can also be in parent-child components , What about the method that the child component triggers the parent component ?
边栏推荐
- Tencent byte and other big companies interview real questions summary, Netease architects in-depth explanation of Android Development
- SSH connection denied
- 22-07-05 upload of qiniu cloud storage pictures and user avatars
- PHP与EXCEL PHPExcel
- JMeter server resource indicator monitoring (CPU, memory, etc.)
- Learn to punch in Web
- Example of applying fonts to flutter
- Guangzhou's first data security summit will open in Baiyun District
- 腾讯T4架构师,android面试基础
- 【GET-4】
猜你喜欢
爬虫(14) - Scrapy-Redis分布式爬虫(1) | 详解
Ideas and methods of system and application monitoring
腾讯T4架构师,android面试基础
B-jiege's tree (pressed tree DP)
【Yann LeCun点赞B站UP主使用Minecraft制作的红石神经网络】
HMS Core 机器学习服务打造同传翻译新“声”态,AI让国际交流更顺畅
Tencent byte Alibaba Xiaomi jd.com offer got a soft hand, and the teacher said it was great
枚举根据参数获取值
5. 無線體內納米網:十大“可行嗎?”問題
Continuous test (CT) practical experience sharing
随机推荐
mod_ WSGI + pymssql path SQL server seat
【计网】第三章 数据链路层(4)局域网、以太网、无线局域网、VLAN
Monthly report of speech synthesis (TTS) and speech recognition (ASR) papers in June 2022
BeagleBoneBlack 上手记
String长度限制?
Error analysis ~csdn rebound shell error
Tencent byte and other big companies interview real questions summary, Netease architects in-depth explanation of Android Development
[network planning] Chapter 3 data link layer (4) LAN, Ethernet, WLAN, VLAN
Tips for web development: skillfully use ThreadLocal to avoid layer by layer value transmission
永磁同步电机转子位置估算专题 —— 基波模型与转子位置角
02 基础入门-数据包拓展
系统与应用监控的思路和方法
Selenium advanced operations
[cloud lesson] EI lesson 47 Mrs offline data analysis - processing OBS data through Flink
8086 instruction code summary (table)
Poj3617 best cow line
Notes on beagleboneblack
Example of shutter text component
How to select several hard coded SQL rows- How to select several hardcoded SQL rows?
New generation garbage collector ZGC