javascript - vue js传递 “top-level” bool 值不起作用，仅嵌套

真奇怪当我在顶层定义 bool(boolean) 属性showModal时，vue.js只会忽略它。这是我在做什么:

//Component:
export default {
  props:['rating', 'showModal'],
  data: function data () {
    return {
      rating: this.rating,
      showModal: this.showModal
    };
  }
};

调用 View :

const sharedRating = {
  title: '',
  remark: ''
};

let showModal = false;

new Vue({
  el: '#rating-edit-container',
  data: {
    showModal: showModal,
    rating: sharedRating
  }
});

showModal = true;

然后将两个值都传递给组件:

  <rating-edit
    :rating="rating"
    :show-modal="showModal"></rating-edit>

但是，当我更改showModal的值时，什么也没有发生。

如果我在评级对象中传递showModal并使用该嵌套属性，则一切正常:

const sharedRating = {
  showModal: false,
  title: '',
  remark: ''
};

new Vue({
  el: '#rating-edit-container',
  data: {
    rating: sharedRating
  }
});

sharedRating.showModal = true;

难道“独立” bool(boolean) 属性也可以在Vue中使用，还是总是需要“包装”它们？

最佳答案

好吧，首先，我不确定您的组件中正在发生什么，因为您要使用相同的名称来命名属性和数据值。如果不进行测试，则不确定哪一个获胜，但看起来好像是data属性。您不应将同一属性命名为属性和数据值。该属性将始终对您可用。

在组件中定义数据函数时，同样重要的是要记住，只有在创建组件时才调用数据函数。设置地点

showModal: this.showModal

(暂时忽略我上面所说的这不是一个好主意)showModal data属性仅设置一次。除非您在组件内部对其进行更新，否则它将永远不会被更新。它不会收到对showModal属性的更改。

如果您希望组件从外部获取showModal的更新，并且要在组件外部反射(reflect)对组件中showModal的更改，则需要以不同的方式进行处理。

Vue组件由props down, events up结构组成。

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的任何更新都将在组件内部反射(reflect)为show，并且组件内部对show的任何更改都将发送给父对象。然后，因为v-model侦听input事件，所以父级中的showModal将使用新值进行更新。

现在您可能会问到这一点，但是当showModal是对象的属性时，为什么它可以工作？

当您将对象从顶层向下传递到组件中时，在Vue外部，根Vue和组件都在使用同一对象。任何这些地方对showModal属性的任何更改都将反射(reflect)在所有这些地方。但是，如果要通过创建一个新的showModal对象来更新sharedRating，您将看到与使用 bool(boolean) 值时类似的行为。 Vue中的属性是不可变的，这意味着您对原始javascript值(字符串，数字， bool(boolean) 值等)所做的任何更改都不会反射(reflect)在组件外部，实际上，如果您使用的是Vue，Vue会发出警告开发版本。但是，JavaScript中的对象和数组是通过引用传递的。该引用是不可变的，但是可以更改对象的属性和数组的内容。