问传递“顶级”布尔值的vue js不能工作，只能嵌套。

EN

首先，我不知道组件中发生了什么，因为您要用相同的名称命名属性和数据值。如果不进行测试，我不确定哪一项获胜，但看起来这是数据属性。不应将属性和数据值命名为相同的内容。该财产将永远对您可用。

在组件中定义数据函数时，还必须记住，只有在创建组件时才调用数据函数。你设置的地方

showModal: this.showModal

(刚才我说过这不是个好主意) showModal数据属性只设置一次。除非在组件中更新它，否则永远不会更新它。它将不会接收对属性showModal的更改。

如果您希望组件从外部获得对showModal的更新，对于组件中对showModal的更改在组件外部重新生成，则需要对此进行稍微不同的处理。

Vue组件由支撑住，事件上升结构组成。

export default {
  props:['rating', 'showModal'],
  data: function data () {
    return {
      rating: this.rating,
    };
  }, 
  computed:{
    show:{
      get(){ return this.showModal; }
      set(v){ this.$emit('input', v) }
    }
  }
};

然后修改模板中使用它的方式：

rating-edit
  :rating="rating"
  v-model="showModal"></rating-edit>

以这种方式编写组件时，组件外部对showModal的任何更新都将以show的形式反映在组件中，而组件中对show的任何更改都将发送给父组件。然后，由于v-model侦听input事件，父级中的showModal将被更新为新值。

现在您可能会问，当showModal是一个对象的属性时，它为什么会工作呢？

当您将对象从顶层传递到组件时，在Vue之外，您的根Vue和您的组件都在处理同一个对象。任何这些地方对showModal属性的任何更改都将反映在所有这些位置中。但是，如果要通过创建一个新的showModal对象来更新sharedRating，您将看到类似于使用布尔值时所看到的行为。Vue中的属性是不可变的，这意味着您对原始javascript值(字符串、数字、布尔值等)所做的任何更改都不会反映在组件之外，实际上，如果您使用开发版本，Vue将抛出有关这样做的警告。然而，javascript中的对象和数组是通过引用传递的。引用是不可变的，但对象的属性和数组的内容可以更改。