当前位置：首页 > article >正文

Vue学习：props验证的一个小细节“Prop 名字格式”

article 2024/9/21 19:50:43

今天学习props验证，用了一个例子，感觉代码没什么错误，控制台也没有报错，可是程序就是不运行。
父组件调用部分代码如下：

   <div id="app"> 
       <poetry-comp :poemArr="poemList" :num="poemList.length"></poetry-comp>
  </div>

子组件模板部分代码如下：

<ul> 
   <li v-for="item in poemArr" :key="item.id">
     <h3>{{item.id}}.{{item.title}}</h3>  
     <h4>{{item.author}}</h4>
     <p>{{item.content}}</p>
  </li>
</ul>

script代码部分如下：

const PoetryComp = {        
   template:'#tp_child',
   props:{
   poemArr:Array,      //poemArr类型是数组,                                  
   }            
}

后来到官网查看了一下，《传递 prop 的细节》小节中提到，“Prop 名字格式”，如果一个 prop 的名字很长，应使用 camelCase 形式，即驼峰命名法。可以直接在模板的表达式中使用，如下：

<span>{{ poemArr }}</span>

结论

虽然理论上也可以在向子组件传递 props 时使用 camelCase 形式 (使用 DOM 内模板时例外)，但实际上为了和 HTML attribute 对齐，我们通常会将其写为 kebab-case 形式，即短横线形式。也就是说，在我用的例子中，父组件调用时，把poemArr 改成poem-arr，然后就正常运行了。

   <div id="app"> 
       <poetry-comp :poem-arr="poemList" :num="poemList.length"></poetry-comp>
  </div>

完整代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta title="viewport" content="width=device-width, initial-scale=1.0">
        <title>Props对组件传递的数据进行验证</title>
        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    </head>
    <body> 
        <div id="app"> 
            <!--调用 PoetryComp 组件 :poem-arr短横线命名法,对接后面的poemArr--> 
            <poetry-comp :poem-arr="poemList" :num="poemList.length"></poetry-comp>
        </div> 
        <template id="tp_child"> 
            <!--PoetryComp 子组件模板结构 v-for指令循环输出--> 
            <div> 
                <h3>诗集中共{{num}}首诗</h3> 
                <ul> 
                    <li v-for="item in poemArr" :key="item.id">
                        <h3>{{item.id}}.{{item.title}}</h3>  
                        <h4>{{item.author}}</h4>
                        <p>{{item.content}}</p>
                   </li>
                </ul> 
            </div> 
        </template> 
    </body> 
    <script>
        const RootComponent = {      
            data(){ 
                return{ 
                    poemList:[
                        {
                            id:1,
                            title:'登鹳雀楼 ',
                            author:'唐·王之涣',
                            content:'欲穷千里目，更上一层楼。'
                        },
                        {
                            id:2,
                            title:'江上',
                            author:'宋·王安石',
                            content:'青山缭绕疑无路，忽见千帆隐映来。'
                        },
                        {
                            id:3,
                            title:'秋词',
                            author:'唐·刘禹锡',
                            content:'古人逢秋悲寂寥，我言秋日胜春朝。'
                        } 
                    ],
                } 
            } 
        }
        const PoetryComp = {              //创建子组件
            template:'#tp_child',
            props:{
                poemArr:Array,            //poemArr类型是数组,
                num:{
                    type: Number,        //类型为Number                    
                    validator(value) {   //验证函数，当前数组元素为3个，验证不通过       
                        return value>0 && value<3
                    }                    
                },                                      
            }            
        }    
        const appObj = Vue.createApp(RootComponent)
        appObj.component('PoetryComp',PoetryComp)      //组件全局注册
        appObj.mount("#app")
    </script>
</html>