props是Vue实例上的一个属性

是组件的自定义属性，我们在封装通用组件的时候合理使用props可以很大限度的提高组件的一个复用性

目录

了解与使用props

 props的default属性

 props的type属性

 prop的required必填项

---

我们想要使用data来进行交互-->（点击按钮加1）：

<template>
  <div id="app">
    <p>{{ num }}</p>
    <button @click="num++"> + 1 </button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      num:0
    }
  }
}
</script>

我们现在给data中的变量赋值，对data数据进行操作，如果想要让用户自己给到一个初始值的话，data是不可能实现的，这时我们就需要用到props属性（props中的数据可以直接在模板结构中使用）

---

了解与使用props

export default {
  props:['test'],
  data(){
    return{
      num:0
    }
  }
}

<p>{{ test }}</p>
<button @click="test++"> + 1 </button>

<MyCount :test="18"></MyCount>

 

这样用户就可以自定义初始值了

可是现在又出现了一个这样的问题：虽然数值可以加上去，可以实现我们想要的功能，却报错了

 错误显示我们是不能直接修改prop值的，因为这个值将来在组件变更的时候可能会出现被覆盖的情况

那么说明prop其实是一个仅可读的

那么没有解决方法了吗？

那是不可能的

我们可以把props中的test值给到data中的num值，我们在页面上使用data中的num值进行显示：

<template>
  <div id="app">
    <p>{{ num }}</p>
    <button @click="num++"> + 1 </button>
  </div>
</template>

<script>
export default {
  props:['test'],
  data(){
    return{
      num:this.test
    }
  }
}
</script>

---

 props的default属性

在声明自定义属性时，如果我们没有给到num数值的话，可以通过default来定义属性的默认值，当然，这时我们就不可以继续使用数组的形式了，我们需要使用对象来指定：

当外界使用该组件的时候，如果没有传递test属性，那么默认值会生效

相反：如果传递了test属性，那么就会以传递的test属性为准：

<MyCount></MyCount>

export default {
  props:{
    test:{
      default:2
    }
  },
  data(){
    return{
      num:this.test
    }
  }
}

---

 props的type属性

在声明一个自定义属性的时候，我们可以通过type来定义属性的值类型，我们规定为数值型，那么必须输入数值型，输入其他的数据类型就会报错；我们规定为object对象类型，那么就必须输入一个对象，输入其他数据类型就会报错：

export default {
  props:{
    test:{
      default:2,
      type:Number
    }
  },
  data(){
    return{
      num:this.test
    }
  }
}

---

 prop的required必填项

必填项效验

export default {
  props:{
    test:{
      default:2,
      type:Number,
      required:true
    }
  },
  data(){
    return{
      num:this.test
    }
  }
}

就算配置了默认值，如果你不填写数值的话，也是会报错的

就像这样：

<MyCount></MyCount>