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

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 中

page

msg.vue 中

{{ love }}

子组件 msg.vue 中

{{ msg }}

点击

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

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

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

page

click

footer 组件中

footer

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

最后总结一下：

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

//父组件

//子组件

export default {

...

props: ['love']

}

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

//子组件

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) => {

//...

})

}

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。