以编程方式将具有计算属性的 Vue 组件注入另一个组件答案

【问题标题】：Inject Vue component with computed properties into another component programmatically以编程方式将具有计算属性的 Vue 组件注入另一个组件
【发布时间】：2017-05-22 22:57:15
【问题描述】：

我正在构建一个具有与之关联的计数器的事物列表，如下图所示：

我正在努力研究如何注入每一行的右侧部分，该部分位于一个单独的组件中，并处理当您单击每个按钮时发生的情况，更新其计数器，每当我单击“添加新”时。

如何注入组件及其依赖项和计算属性？

【问题讨论】：

vue的方式是在父模板中声明子组件。
我认为您没有理解问题所在。每当我单击“添加新”时，我都会从数组中选择信息，将其添加到表上的新行中，并且应该在该新行上动态添加我的 Counter.vue 组件的新实例，已经绑定，以便当我单击 + 或 - 它会更新行本身的计数器。
对。您可以使用v-for 声明所有这些。您将在row 中拥有一个row 组件和一个counter 组件。 counter 可以向row 发出递增/递减事件。
尝试第二个 vue，用作事件调度器/侦听器，详见此处：alligator.io/vuejs/global-event-bus 它可能正是您要寻找的。span>
第二个 vue 实例可以执行诸如 'emit' 和 'on' 之类的操作 - 所以当组件 a eventBus.emit('somethingAwesome', {'with':data}) 时，不同的组件可以使用 eventBus。 on('somethingAwesome',function(e){this.$set(this,'someVar',e)});

标签： javascript vue.js components vuejs2

【解决方案1】：

Eric Guan 给我的答案是对的。我把 Vue 自己解决的事情复杂化了。

我的自定义组件依赖于我在 v-for 中提供的任何内容，因此每当该数组发生变化时，我在该行上的组件都会跟随：

    <ul class="extras">
        <li v-for="extra in extras">
            <div>{{ extra.name }} </div>
            <div>{{ extra.price }}</div>

            <calculator :object="extra"></calculator>
        </li>
    </ul>

【讨论】：