Question

这很奇怪。当我在顶层定义布尔属性showModal时，它只是被vue.js忽略。这就是我在做的事情：

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

调用视图：

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;

不应该“独立”布尔属性也可以在Vue中运行，还是总是需要“包裹”？

Answer 1

首先，我不确定您的组件中发生了什么，因为您命名的属性和具有相同名称的数据值。没有测试，我不确定哪一个获胜，但它看起来像是数据属性。你应该不将属性和数据值命名为同一个东西。该物业将永远为您服务。

在组件中定义数据函数时，记住仅在组件创建时才调用数据函数也很重要。你在哪里设置

showModal: this.showModal

（暂时忽略我上面所说的这不是一个好主意）showModal data 属性只能设置一次。除非您在组件内部更新，否则永远不会更新它。它将不接收对属性showModal的更改。

如果您想要该组件从外部获取showModal的更新，并且对组件中的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>

以此方式编写组件，对组件<{1}} 外部的任何更新都将反映在内部组件中{ {1}}，对}内部组件的任何更改都将发送给父组件。然后，因为showModal收听了show个事件，所以父级中的show将使用新值进行更新。

现在你可能会问这个问题，但为什么v-model是对象的属性时呢？

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

vue js传递“top-level”布尔值不起作用，只嵌套

1 个答案: