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

Question

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

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

在我拥有的组件上：

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

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

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

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

Answer 1

如果你试图修改一个 prop 的值，Vue 会给你一个警告：

[Vue 警告]：避免直接改变 prop，因为每当父组件重新渲染时，该值都会被覆盖。相反，使用基于道具值的数据或计算属性。

因此，如果您的组件要修改this.active 的值，那么您应该将该值设置为数据属性。否则，您不需要。

---

在组件上实现v-model 时，您需要修改prop 的值的一个常见示例。在这种情况下，您的组件会将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 };
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>

<div id="app">
  <child v-model="foo"></child>
  {{ foo }}
</div>