vue同组件之间数据传递失效

王正一
  • 1.6k

两个组件之间使用Event Bus进行数据传递,但是数据赋值时出现了问题.

接受数据的组件:

<template>
  <div>
     <h1>{{movie.name}}</h1>
  </div>
</template>

<script>
  import Bus from '../bus.js'
  export default {
    name: 'MovieDetail',
    data: function () {
      return {
        movie: {},
        index: 110
      }
    },
    methods: {
      downloadPic () {
        console.log('name=' + this.movieName + ', name2=' + this.movie.name)
      }
    },
    created () {
      Bus.$on('loadMovie', (index, movie) => {
        console.log('index=' + this.index + ', movie=' + this.movie)
        this.setMovie(movie)
        this.setIndex(index)
        console.log('movie name=' + this.movie.name)
      })
    },
    computed: {
      movieName: function () {
        if (this.movie) {
          return this.movie.name
        }
      }
    }
  }
</script>

console,log里面已经看到created函数被调用,this.movie已经被重新赋值了,但是界面上的UI就是没变化,而且打印当前的this.movie还是空对象,这是为什么?

回复
阅读 2.7k
3 个回答
✓ 已被采纳

自己回答一下,主要是没理解Bus的机制。那个组件created回调时,另一个组件的emit已经发出,导致on没有收到事件。

vue里面对象赋值的时候,如果没有在data里面声明他的属性,动态赋值可能会不起作用,你加个name属性试下应该就好了。可以去看看vue官方说明https://vuefe.cn/v2/guide/rea... 进阶第一条----变化检测问题

受现代 Javascript 的限制(以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。

贴出全部代码?

this.setMovie(movie)
this.setIndex(index)

并不知道这两个干了什么。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏