5

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

目前，我正在使用嵌套组件。父母和孩子之间的关系非常好。但是，父组件和主 Vue() 实例之间的关系被打破了。在 Vue() 实例内的计算属性cssstyle中，不会像我期望的那样基于 $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 从计算数据移动到根 Vue() 实例中的数据。

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

但是，我觉得使用有点脏：

this.$root.cssstyle

难道没有别的办法了吗？

4

1 回答 1

5

对于事件发射和侦听，请在2.0 文档中检查此内容。

如果你this从你的custom-component：

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

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

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

然后在你的 JS 中：

methods: {
  action: function (params) {
    console.log('On something')
  }
}
于 2016-09-14T21:18:53.403 回答