第七十二篇：Vue组件的props

好家伙，

 

1.组件的props

props是组件的自定义属性，在封装通用组件的时候，合理的使用props可以极大的提高组件的复用性

 

来假设一下,如果我们需要两个组件分别显示不同的值

目录结构如下:

 

 

HelloWorld.vue中,

  <div>
   
   <h2>我的init值为{{ init }}</h2>

  </div>
</template>

<script>
export default {
  //props指向一个数组,
  //允许使用者通过自定义属性,为当前的组件指定初始值
  //定义属性的名字,是封装这自定义的(只要合法即可)
  props:['init'],
}
</script>

<style>

</style>

 

Left.vue中,

<template>
  <div>
      <h1>我是Left组件</h1>
    <HelloWorld init="5"/>
      
  </div>
</template>

 

Right.vue中,

<template>
<div>
  <h1>我是Right组件</h1>
    <HelloWorld init="10"/>
    </div>
</template>

 

App.vue中

<template>
  <div id="app">
    
    <Left/>
    <Right/>
 
  </div>
</template>

<script>

import Left from './components/Left.vue'
import Right from './components/Left.vue'
export default {
  name: 'App',
  components: {
   
    Left,
    Right
  }
}
</script>

 

对了,main.js中还需要对HelloWorld组件进行全局注册

import HelloWorld from './components/HelloWorld.vue'

Vue.component('HelloWorld',HelloWorld)

效果如下:

 

 

2.对props使用v-bind

若我们将前面的

<HelloWorld init="10">

改为

<HelloWorld :init="10"/>

 

那么这里的init中的10就是数字10

可进行计算处理的数字10

而原先的"10"是字符串

(下图可见两者区别)

 

3.props的值是只读的

vue规定:组件中封装的自定义属性是只读的,程序员不能直接修改props的值,否则会直接报错

 

 

4.实践

好了,现在我们来实现一个经典点击自增一按钮

(太TM经典了)

<template>
  <div>
   
  <h2>我的init值为{{ count }}</h2>
  <button @click="count += 1">加一</button>

  </div>
</template>

<script>
export default {
  props:['init'],

　//count可读可写,所以使用count来进行自增操作
  data(){
    return{
      count:this.init
    }  
  },
} 
</script>

效果如下:

 

 上面是字符字符类型的init

下面是数值类型的init

 

5.props的default默认值

改为对象形式的props

props:{

    //自定义属性A:{/*配置选项*/}
    //自定义属性B:{/*配置选项*/}
    //自定义属性C:{/*配置选项*/}
    init:{
      //若果外界使用Count组件的时候,没有传递init属性,则默认值生效
      default:10
    }
  },

 

当未对init的值进行设定时,默认为10

 

6.props的type值类型

在声明自定义属性时,可以通过type来定义属性的值类型.示例代码如下:

props:{
    
    init:{
      //若果外界使用Count组件的时候,没有传递init属性,则默认值生效
      default: 10,

      //init值的类型必须是Number数字
      type:Number,
    
    }
  },

 

7.props的required必填项

required校验你是否传值

若未传值,则报错,(即使有默认值的存在)

props:{
    
    init:{
      //若果外界使用Count组件的时候,没有传递init属性,则默认值生效
      default: 10,

      //init值的类型必须是Number数字
      type:Number,

      //必须项校验
      required:true
    
    }
  },

 

 

That's all