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

发布时间：2020-12-17 03:01:29 所属栏目：百科来源：网络整理

导读：Vue 的单文件组件在使用 Vue 时非常常用，所以我们也会经常遇到组件之间需要传递数据的时候，大致分为三种情况：父组件向子组件传递数据，通过 props 传递数据。子组件向父组件传递数据，通过 events 传递数据。两个同级组件之间传递数据，通过 event bus

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

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

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

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

msg.vue 中

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

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

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

父组件 page.vue 中

子组件 msg.vue 中

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

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

footer 组件中

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

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

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

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

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

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

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!