Question

如果我传入一个名为active的道具：

<my-component :active="true" :count="10"></my-component>

在我拥有的组件上：

props: [
    'active',
    'count',
],

在组件内部使用这些道具时，我应该将它们设置为数据属性，如下所示：

data() {
    return {
        dataActive: this.active,
    }
},

或者我应该直接将它们作为道具使用？

Answer 1

如果您尝试修改道具的值，Vue会给您一个警告：

[Vue警告]：避免直接改变道具，因为只要父组件重新渲染，该值就会被覆盖。而是根据prop的值使用数据或计算属性。

因此，如果您的组件要修改add_library( Body OBJECT Body.cpp )的值，则应将该值设置为data属性。否则，您不需要。

在组件上实现this.active时，需要修改prop值的常见示例。在这种情况下，您的组件会将v-model属性设置为数据属性，然后在数据属性更改时将value设置为emit事件。

以下是一个简单的例子：

input

Vue.component('child', {
  template: `
    <div>
      <button @click="bar++">up</button>
      <button @click="bar--">down</button>
    </div>
  `,
  props: { value: Number },
  data() {
    return { bar: this.value };
  },
  watch: {
    bar(val) {
      this.$emit('input', val);
    }
  }
});

new Vue({
  el: '#app',
  data() {
    return { foo: 1 };
  }
})

传递道具 - 我应该将它们设置为数据吗？

1 个答案: