Vue 单文件中的数据传递示例
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) => {
//...
})
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue中如何动态添加样式问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了Vue 组件复用多次自定义参数操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
Vue3为我们开发提供了两种组件逻辑实现方式：选项式API和组合式API,本文将尝试为大家分析什么是选项式API和组合式API,以及两种API的优缺点,希望对大家有所帮助2023-12-12
这篇文章主要介绍了vue 导出文件,携带请求头token操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
ArcGis API for js在vue.js中的使用示例详解
这篇文章主要为大家介绍了ArcGis API for js在vue.js中的使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
本篇文章主要介绍了vue-cli项目中怎么使用mock数据 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
最近在做一些数据透析的项目需要用到报表图，那么报表图好用的有老牌的ECharts，比较新意的AntV，思前马后的想了一下还是用了Echarts，这篇文章主要介绍了vue3中使用Apache ECharts,需要的朋友可以参考下2022-11-11
本文主要介绍了Vite中自制mock服务器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
Vue Router修改query参数url参数没有变化问题及解决
这篇文章主要介绍了Vue Router修改query参数url参数没有变化问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue组件传值的11种方式总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
最新评论