Vue 的单文件组件在使用 Vue 时非常常用,所以我们也会经常遇到组件之间需要传递数据的时候,大致分为三种情况:
- 父组件向子组件传递数据,通过 props 传递数据。
- 子组件向父组件传递数据,通过 events 传递数据。
- 两个同级组件之间传递数据,通过 event bus 传递数据。
文档中也已经详细的说明了各种情况下的解决方法,但是现在我在还没有阅读多少文档的情况下,没有找到有单文件组件方面的具体书写方式,智商和理解能力有限的情况下,自己尝试了一下,最后发现其实是一样的。所以这篇文章其实是废话,但是还是想记录一下,不枉自己花了一个多小时。
准备工作,我新建了 6 个文件,分别是:
- index.html
- main.js 「Vue 实例」
- app.vue 「根组件,包含 page 和 footer 组件」
- page.vue 「msg 的父组件,footer 的 同级组件」
- msg.vue
- footer.vue
父组件向子组件传递数据,通过 props 传递数据。
这里我以 page 向 msg 传递数据为例:page.vue 中
<template> <div class="page"> page <msg :love="message"></msg> </div> </template> <script> import msg from './msg.vue' export default { name: 'page', components: { msg }, data () { return { message: 'page-msg' } } } </script>
msg.vue 中
<template> <div class="msg"> {{ love }} </div> </template> <script> export default { name: 'msg', props: ['love'] } </script>
这样以后就会发现,实现了把父组件 page 中的数据传递到子组件 msg 中了。
另外,需要强调一下的是,不要在子组件中修改 props 的值,当然修改是有效的,非常不推荐,而且 Vue 也会有警告提示。正确的做法是传递给 data 中的属性或者计算属性。props 中的值是可以通过 this.love 访问到的。
特别注意 props 值是引用类型时的情况,不可以进行简单的赋值,会影响到父组件,正确的做法是进行深拷贝。
子组件向父组件传递数据,通过 events 传递数据。
父组件 page.vue 中
<template> <div class="page"> page <msg @passData="getData"></msg> </div> </template> <script> import msg from './msg.vue' export default { name: 'page', components: { msg }, data () { return { message: 'hi' } }, methods: { getData (data) { console.log(data) } } } </script>
子组件 msg.vue 中
<template> <div class="msg"> {{ msg }} <button @click="pass">点击</button> </div> </template> <script> export default { name: 'msg', data () { return { msg: 'hello' } }, methods: { pass () { this.$emit('passData', 'success') } } } </script>
点击后就会发现 console 出了 'success'。
同级元素之间传递数据,通过 event bus 来传递。
需要引入一个 Vue 实例 作为中央总线。page 组件中
<template> <div class="page"> page <button @click="changeMsg">click</button> </div> </template> <script> import msg from './msg.vue' import { bus } from '../bus.js' export default { name: 'page', components: { msg }, data () { return { message: 'hi' } }, methods: { changeMsg () { bus.$emit('change', '666') } } } </script>
footer 组件中
<template> <div class="footer"> footer </div> </template> <script> import { bus } from '../bus.js' export default { name: 'footer', data () { return { msg: 'hi' } }, created () { bus.$on('change',(data)=>{ console.log(data) }) } } </script>
嗯,最后发现打印出来了 '666',这样就实现了。
最后总结一下:
父组件向子组件传递数据,通过 props 传递数据。具体做法只需要在父组件中绑定,在子组件中声明。
//父组件 <father> <child :love="msg"></child> </father> //子组件 export default { ... props: ['love'] }
子组件向父组件传递数据,通过 events 传递数据。具体做法时在父组件中监听,在子组件中触发。
<father> <child @passData="getData"></child> </father> //子组件 export default { ... methods: { pass () { this.$emit('passData', 'hi') } } }
两个同级组件之间传递数据,通过 event bus 传递数据。
import { bus } from './bus.js'//两个组件都要引入 //触发事件 export default { ... methods: { passData () { this.$emit('communicate', 'hello') } } } //监听事件 export default { ... mounted: { this.$on('communicate', (data) => { //... }) } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
- 纪钧瀚《钢琴阅读时光 雨中书店聆听轻音乐》[FLAC/分轨][399.62MB]
- 证声音乐图书馆《走向自然 疗心爵士乐》[320K/MP3][87.4MB]
- 证声音乐图书馆《走向自然 疗心爵士乐》[FLAC/分轨][184.94MB]
- 陈慧娴.2018-Priscilla-Ism演唱会3CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 郑秀文.1999-我应该得到(国)【华纳】【WAV+CUE】
- 陈家慧.2011-钢琴酒吧2CD【龙吟唱片】【WAV+CUE】
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[320K/MP3][45.01MB]
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[FLAC/分轨][109.13MB]
- 赞多《序章》[320K/MP3][45.54MB]
- 许巍.2004-每一刻都是崭新的【步升大风】【WAV+CUE】
- 群星.2024-四方馆影视原声带【韶愔音乐】【FLAC分轨】
- 陈雷.1997-安锁咧【金圆唱片】【WAV+CUE】
- 关淑怡.2013-MY.FAVORITE.SK.3CD【环球】【WAV+CUE】
- Sweety.2006-花言乔语【丰华】【WAV+CUE】
- 李恕权.2003-回·20年全精选2CD【SONY】【WAV+CUE】