javascript vue3 props 验证属性

Props管理
Props管理对Vue组件至关重要，因为它可以以不同的方式创建。您还可以验证Prop、创建多个Prop并根据需要修改它们。

要在Vue组件中创建新属性，您可以通过几种不同的方式来实现。假设你有你的组件，你需要创建Prop：isAdmin。

让我们看看您可以采用的不同方法：

<template>
  <section>
    <component v-if="isAdmin"></component>
  </section>
</template>
<script>
export default {
  name: 'Component',
 // One
  props: {
    isAdmin: {
      type: Boolean,
      default: false,
      required: true
    }
  },

 // Two
  props: ['isAdmin'],
 // Three
  props: {
    isAdmin: Boolean
  }
}
</script>
验证您的Prop非常重要。幸运的是，这也很简单：

// ...
 // One
  props: {
    isAdmin: {
      default: false,
      required: true,
      validator: function(value) {
        return typeof === 'boolean';
      }
    }
  },
// ...
最后，修改props就像重新调整它们的值一样简单：


//...
methods: {
  isAdmin() {
    this.isAdmin = true;
  }
}
//..
要为父组件中的prop赋值：

<template>
  <section>
    <component :isAdmin="true"></component>
  </section>
</template>