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 中 <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) => { //... }) }}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
vue,数据传递,Vue,单文件数据传递
|
