将值从组件传递到父实例答案

【问题标题】：Pass value from a component to the parent instance将值从组件传递到父实例
【发布时间】：2017-12-22 08:50:41
【问题描述】：

我有一个名为 cartComponent 的组件，其数据属性为 cartCount，每当有新商品添加到购物车时，它就会递增。

我需要使用该值来更新模板中不属于组件的值。这可能吗？

这是我的父 Vue 实例的脚本：

new Vue({
  el: "#cart-app",
  components: {
    cart: cartComponent
  },
  data: {
    searchQuery: '',
    appliedFilters: ['Day 1'],
    purchaseData: json,
    cCount: 0 // CARTCOUNT; NEEDS TO BE UPDATED FROM COMPONENT
  }
});

【问题讨论】：

我已经添加了一个答案，但我可能会误解您的问题。您是否将cCount 作为道具传递给cart 组件？

标签： javascript vue.js components

【解决方案1】：

这是使用.sync modifier 的理想情况。

来自文档：

当子组件改变一个有 .sync 的 prop 时，值的变化会反映在父组件中

在您的情况下，您可以将.sync 修饰符添加到模板中绑定的cCount 属性（假设您的组件具有cCount 属性）：

<cart :c-count.sync="cCount"></cart>

并且在购物车组件的脚本中，当计数增加时会发出update:cCount 事件：

methods: {
  incrementCount() {
    this.cartCount++;
    this.$emit('update:cCount', this.cartCount);
  }
}

这会自动将父 Vue 实例的 cCount 属性的值设置为购物车组件的 cartCount 属性的值。

Here's a working fiddle.

此功能从 Vue 版本 2.3.0 开始可用，但如果您使用的是早期版本，这将为您提供相同的功能：

<cart :c-count="cCount" @update:foo="val => cCount = val"></cart>

这是因为<comp :foo.sync="bar"></comp> 只是语法糖：

<comp :foo="bar" @update:foo="val => bar = val"></comp>

【讨论】：