Question

我有一个名为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
  }
});

Answer 1

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

来自文档：

当子组件变异具有.sync的道具时，值更改将反映在父级
中

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

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

当计数器递增时，在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>

将值从组件传递到父实例

1 个答案: