Question

我有组件，里面我正在发出：

methods: {
    sendClick(e)
    {
        bus.$emit('codechange', this.mycode);
        console.log(this.selectedLanguage);
        this.$parent.sendCode();
        this.$parent.changeView();
    }

}

在父组件中，我正在使用数据：

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

    sendCode()
    {
        console.log("Code is sended to server");
        this.currentView = 'view-form';
        bus.$emit('codechange', this.mycode);
    }   

  }, 

  created()
  {         
    bus.$on('codechange', function(mycode){
    console.log("test"); // this works
    this.mycode = mycode; // this works
    }.bind(this));

  }

})

处理父母工作正常。但点击sendCode()我想将数据发送到第三个组件。第三个组件代码：

Vue.component('view-form', {
    template: `
        <div class="ViewCodeContainer">
            <div class="ViewCode">my code here</div>
            <code> {{mycode}} </code>
            <div class="ViewCodeMenu">my menu here</div>
        </div>`,
        data() {
            return {
                mycode: ''
            }
        },
    created()
        {       
            bus.$on('codechange', function(mycode){
            console.log("hererere");
                console.log(mycode);
            this.mycode = mycode;
            }.bind(this));
            console.log("test");
        }
})

但是代码的处理不起作用。阻止console.log("hererere");未执行。我做错了什么？

Answer 1

@Wostex在这种情况下是正确的。实质上，发出事件时，您的view-form组件不存在。在更改视图之前它不存在，您在事件处理程序中执行此操作。所以它没有办法接收事件，因为你的处理程序不存在。

如果您的动态组件是父组件的子组件，则只需将代码作为属性传递。

<component :is="currentView" :mycode="mycode"></component>

并更新您的view-form组件。

Vue.component('view-form', {
  props:["mycode"],
  template: `
    <div class="ViewCodeContainer">
      <div class="ViewCode">my code here</div>
      <code> {{code}} </code>
      <div class="ViewCodeMenu">my menu here</div>
    </div>`,
  data() {
    return {
      code: this.mycode
    }
  }
})

这是一个有效的example。

无法从一个孩子发放到另一个孩子

1 个答案: