javascript - 迁移到 Vue 2.0 $on() 听不到 $emit()

Question

背景:我正在从 1.0 迁移到 2.0。

目前，我正在使用嵌套组件。 parent 和 child 之间的关系非常好。但是，父组件和主 Vue() 实例之间的关系被打破了。在计算属性中 cssstyle Vue() 实例内部并没有像我预期的那样根据 $emit()/$on() 进行更新。

相关章节:

HTML 中父组件的使用:

<f9-padding v-if="editable" ></f9-padding>

父组件内部

computed: {
    cssstyle: function() {
        var padding_style = this.padding();
        bus.$emit('padding_changed', padding_style);
        return padding_style;
    }
}

主 Vue() 实例内部

computed: {
    cssstyle: function() {
        console.log('cssstyle computed');
        bus.$on('padding_changed', function (padding_style) {
            return padding_style;
        });
        return 'padding: 0px;';
    },
    ...

父级内部的计算属性更新得很好。然而，主 Vue() 实例中的计算属性仅在页面加载时运行。我不明白如何从未使用 <input> 的父项发出数据元素。我在网站上找到的大多数示例都只关注 <input>案件。我刚刚计算出属性数据发生变化。我尝试使用此处显示的方法:http://rc.vuejs.org/guide/components.html#Custom-Events ，但让我担心的是，该文档讨论的是组件之间的事件监听，而不是父组件和主 Vue() 实例之间的事件监听。

更新:我能够通过将父级的计算属性更改为以下内容来解决此问题:

computed: {
    cssstyle: function() {
        var padding_style = this.padding();
        this.$root.cssstyle = padding_style;
        return padding_style;
    }
}

并将 cssstyle 从 computed 移动到根 Vue() 实例中的数据。

data: {
    cssstyle: 'padding: 0px;',
},

但是，我觉得使用起来有点脏:

this.$root.cssstyle

没有别的办法吗？

Answer 1

对于事件发送和监听，请在 2.0 docs 中查看.

如果您从 custom-component 发出 this:

cssstyle: function () {
  /*...*/
  this.$emit('onsomething', params)
}

然后，无论你在哪里创建这个组件的实例，你都要做这样的事情

<tamplate>
    <custom-component @onsomething="action"></custom-component>
</tamplate>

然后在你的 JS 中:

methods: {
  action: function (params) {
    console.log('On something')
  }
}