vue2知识点：组件的props属性、非props属性、props属性校验

2024-10-27 294

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： vue2知识点：组件的props属性、非props属性、props属性校验

@[toc]

3.10props属性

组件可以嵌套使用，叫做父子组件。那么父组件经常要给子组件传递数据这叫做父子组件通信。父子组件的关系可以总结为 props 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。看看它们是怎么工作的：

使用父组件给子组件传递属性流程：
1. 在父组件中定义数据
2. 在使用组件时，绑定父组件中的数据
3. 在子组件中通过props属性声明父组件中传递过来的参数
4. 在template属性中使用父组件中的参数
## 举例：父组件给子组件传递属性msg和greetText，子组件用属性a和b接收，并打印输出

java <div id="app"> <!-- v-bind:a 简写成 :a --> <child :a="msg" :b="greetText"></child> </div> <script> /*** * 父子组件通信: 父组件通过props属性向子组件进行数据传递 * 使用方式: 子组件定义时用props指定接收参数名 * */ Vue.component('child', { //声明props props:['a','b'], //使用父组件传递的数据 template:'<span>{
 {a}} == {
 {b}}</span>' }); var app = new Vue({ el:'#app', data:{ msg:'来自父组件的消息', greetText:'你好Child' } }); </script>

> 结果展示

# 3.11props校验

子组件在接收父组件传入数据时, 可以进行prop校验，来确保数据的格式和是否必传。

注意点1：props可配置3种形式，如果没有参数格式化校验，推荐形式1使用居多。

> 形式1：简单声明接收

java props:['name','age','sex']

> 形式2：接收的同时对数据进行类型限制

java props:{ name:String, age:Number, sex:String }

> 形式3：接收的同时对数据：进行类型限制+默认值的指定+必要性的限制

java props:{ name:{ type:String, //name的类型是字符串 required:true, //name是必要的 }, age:{ type:Number, default:99 //默认值 }, sex:{ type:String, required:true } }

注意点2:

问题：如果data中属性名和props中属性重名，谁优先级高？

答案：props种属性名优先级高，因此为了避免不必要问题，避免data中属性名和props中属性重名

注意点3：props后面是对象而不是数组形式（即：只接收属性不校验可使用数组形式，如props:[]，如果要进行校验请使用对象形式，如props:{}），同时可以指定以下属性：
1) type: 指定数据类型 String Number Object ...注意不能使用字符串数组，只能是对象大写形式
2) required: 指定是否必输
3) default: 给默认值或者自定义函数返回默认值
4) validator: 自定义函数校验

形式如下：

Vue.component('example', {
   
  props: {
   
    // 基础类型检测 (`null` 指允许任何类型)
    propA: Number,
    // 可能是多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
   
      type: String,
      required: true
    },
    // 数值且有默认值
    propD: {
   
      type: Number,
      default: 100
    },
    // 数组/对象的默认值应当由一个工厂函数返回
    propE: {
   
      type: Object,
      default: function () {
   
        return {
    message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
   
      validator: function (value) {
   
        return value > 10
      }
    }
  }
})

举例

完整代码：

<div id="app">
    <child :a="msg" :c="greetText" :f="hello"></child>
</div>
<script>
    Vue.component('child', {
   
        //声明props 检验
        props:{
   
            'a': String,
            'b': [Number,String],
            'c': {
   
                required:true
            },
            'd':{
   
                default:100
            },
            e:{
   
                type: Number,
                default: function () {
   
                    return 1;
                }
            },
            f:{
   
                type:Number,
                validator: function (value) {
   
                    return value < 100;
                }
            }
        },
        template:'<span>{
   {a}} == {
   {d}} == {
   {e}} == {
   {f}}</span>'
    });
    var app = new Vue({
   
        el:'#app',
        data:{
   
            msg:'来自父组件的消息',
            greetText:'你好Child',
            hello:12
        }
    });
</script>

结果展示

注意点4：props是用来接收传递过来的属性值，最后会统一绑定到vc上，最好不要直接修改props的属性值(也就是不要直接修改vc上面的props接收的属性值，会报错)，会报错如图，所以为了避免这个问题，最好的解决方案是在data中重新定一个新属性值，用来接收props中传递过来的参数属性

注意点5：组件标签传递的属性名也是有限制的，不能啥都瞎传，比如你想传递key就会报错如图，报错说key已经被征用了，不让使用

<Student name="李四" sex="女" :age="18" key=”123’/>
props:['name','age','sex',key]

3.12非props属性

标签引用子组件时，非定义的props属性,自动合并到子组件上,class和style也会自动合并,如果class或者style重复采用就近原则。

举例：定义子组件设置class和style，而标签引用子组件时也设置了class和style，那么会进行属性合并，如果重名采用就近原则。

<div id="app">
    <child data-index="0" class="cont" style="font-size: 20px;"></child>
</div>
<script>
    /***
     * 引用子组件: 非定义的prop属性,自动合并到子组件上,class和style也会自动合并
     * */
    Vue.component('child', {
   
        template:'<span class="item" style="color:red;">我是child</span>'
    });
    var app = new Vue({
   
        el:'#app'
    });
</script>