Question

我有孩子component，想要将一些数据传递给它的父母。我的子组件看起来像：

// <button @click="sendClick($event)">Send</button>
// ...
data: function (){
    return {
            mycode: ""
        }
    },
    methods: {
        sendClick(e)
        {
            bus.$emit('change', this.mycode);
        }
}

我的父组件看起来：

var app = new Vue({
  el: '#app',
  data: {
    currentView: 'past-form',
    mycode: ''
  },
  methods:
  {
    changeView()
    {
        this.currentView = 'past-form'
        console.log(this.mycode);
    },

  }, 

  created()
  {
        bus.$on('change', function(mycode){
            this.mycode = mycode;

        });
  }

})

我没有找到一个比bus.$on放置bus（全局声明created()）更好的地方，但是文档声明created()是created()对于在加载页面后应该初始化的东西。 console.log(this.mycode)块有效;我通过放入mycode: ''来检查它，但是我应该在其他地方移动emit处理程序吗？
看起来我的代码没有执行console.log(this.mycode);，因为a = x -> a(x) + b(x)不会打印任何内容。

Answer 1

正如我在评论中提到的，如果您的组件是您Vue的直接子项，那么就不需要总线。

也就是说，created处理程序适合添加bus事件处理程序。

我预计您遇到的问题是this问题。尝试将处理程序更改为

bus.$on('change', mycode => this.mycode = mycode)

请参阅How to access the correct this inside a callback?

这是一个例子。

console.clear()

const bus = new Vue()

Vue.component("child", {
  template: `<button @click="sendClick($event)">Send</button>`,
  data: function() {
    return {
      mycode: "something"
    }
  },
  methods: {
    sendClick(e) {
      bus.$emit('change', this.mycode);
    }
  }
})

var app = new Vue({
  el: '#app',
  data: {
    currentView: 'past-form',
    mycode: ''
  },
  methods: {
    changeView() {
      this.currentView = 'past-form'
      console.log(this.mycode);
    },

  },

  created() {
    bus.$on('change', mycode => {
        this.mycode = mycode
        this.changeView()
    })
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div id="app">
  <child></child>
  Parent mycode: {{mycode}}
</div>

我应该放置发射器的处理器？

1 个答案: