Vue 单文件中的数据传递示例

2024-02-27 04:22:04 127

Vue的单文件组件在使用Vue时非常常用，所以我们也会经常遇到组件之间需要传递数据的时候，大致分为三种情况：

父组件向子组件传递数据，通过props传递数据。
子组件向父组件传递数据，通过events传递数据。
两个同级组件之间传递数据，通过eventbus传递数据。

文档中也已经详细的说明了各种情况下的解决方法，但是现在我在还没有阅读多少文档的情况下，没有找到有单文件组件方面的具体书写方式，智商和理解能力有限的情况下，自己尝试了一下，最后发现其实是一样的。所以这篇文章其实是废话，但是还是想记录一下，不枉自己花了一个多小时。

准备工作，我新建了6个文件，分别是：

index.html
main.js「Vue实例」
app.vue「根组件，包含page和footer组件」
page.vue「msg的父组件，footer的同级组件」
msg.vue
footer.vue

父组件向子组件传递数据，通过props传递数据。

这里我以page向msg传递数据为例：page.vue中

msg.vue中

这样以后就会发现，实现了把父组件page中的数据传递到子组件msg中了。

另外，需要强调一下的是，不要在子组件中修改props的值，当然修改是有效的，非常不推荐，而且Vue也会有警告提示。正确的做法是传递给data中的属性或者计算属性。props中的值是可以通过this.love访问到的。

特别注意props值是引用类型时的情况，不可以进行简单的赋值，会影响到父组件，正确的做法是进行深拷贝。

子组件向父组件传递数据，通过events传递数据。

父组件page.vue中

子组件msg.vue中

点击后就会发现console出了'success'。

同级元素之间传递数据，通过eventbus来传递。

需要引入一个Vue实例作为中央总线。page组件中

footer组件中

嗯，最后发现打印出来了'666'，这样就实现了。

最后总结一下：

父组件向子组件传递数据，通过props传递数据。具体做法只需要在父组件中绑定，在子组件中声明。

//父组件




//子组件
exportdefault{
...
props:['love']
}

子组件向父组件传递数据，通过events传递数据。具体做法时在父组件中监听，在子组件中触发。





//子组件
exportdefault{
...
methods:{
pass(){
this.$emit('passData','hi')
}
}
}

两个同级组件之间传递数据，通过eventbus传递数据。

import{bus}from'./bus.js'//两个组件都要引入

//触发事件
exportdefault{
...
methods:{
passData(){
this.$emit('communicate','hello')
}
}
}

//监听事件
exportdefault{
...
mounted:{
this.$on('communicate',(data)=>{
//...
})
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

Vue 单文件中的数据传递示例

热门推荐

随机推荐