vue組件的駝峰式命名與短橫線分割命名

本文轉載自查看原文 2020-09-21 17:14 1703 VUE

起因是因為看見下圖，自己沒明白為什么，從而上網查了一下。

參考：https://blog.csdn.net/qq_43650979/article/details/105839130

官網給出說明為：

1.注冊組件的時候使用了駝峰命名

如果在注冊組件的時候使用了駝峰命名, 那么在使用時需要轉換成短橫線分隔命名

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>組件命名</title>
 6     <script src="js/vue.js"></script>
 7 </head>
 8 <body>
 9 <div id="app">
10     <my-son></my-son><!-- 使用時：短橫線分割命名-->
11 </div>
12 <template id="son">
13     <div>
14         <p>......</p>
15     </div>
16 </template>
17 <script>
18     Vue.component("mySon", { // 注冊時：駝峰式命名
19         template: "#son",
20     });
21     let vue = new Vue({
22         el: '#app',
23     });
24 </script>
25 </body>
26 </html>

2.傳遞數據時使用駝峰名稱

如果父組件向子組件傳遞數據時使用了短橫線分隔命名, 子組件接收時寫駝峰式命名

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>組件命名</title>
 6     <script src="js/vue.js"></script>
 7 </head>
 8 <body>
 9 <div id="app">
10     <my-son :parent-name="name"></my-son><!-- 向子組件傳遞數據：短橫線分割命名，不能使用駝峰式-->
11 </div>
12 <template id="son">
13     <div>
14         <p>{{parentName}}</p><!-- 駝峰式使用-->
15     </div>
16 </template>
17 <script>
18     Vue.component("mySon", {
19         template: "#son",
20         props:["parentName"] // 駝峰式接收
21     });
22     let vue = new Vue({
23         el: '#app',
24         data:{
25             name:"test"
26         }
27     });
28 </script>
29 </body>
30 </html>

View Code

3.傳遞方法時雙方都不能使用駝峰命名, 只能用短橫線分隔命名

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>組件命名</title>
 6     <script src="js/vue.js"></script>
 7 </head>
 8 <body>
 9 <div id="app">
10     <my-son :parent-name="name" @parent-fn="fn"></my-son><!-- 向子組件傳遞方法：短橫線分割命名，不能使用駝峰式-->
11 </div>
12 <template id="son">
13     <div>
14         <button @click="fn">按鈕</button>
15         <p>{{parentName}}</p>
16     </div>
17 </template>
18 <script>
19     Vue.component("mySon", {
20         template: "#son",
21         props:["parentName"],
22         methods:{
23             fn(){
24                 this.$emit("parent-fn"); // 短橫線式接收
25             }
26         }
27     });
28     let vue = new Vue({
29         el: '#app',
30         data:{
31             name:"test1"
32         },
33         methods:{
34             fn(){
35                 console.log("test2");
36             }
37         }
38     });
39 </script>
40 </body>
41 </html>

View Code

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 430 vue組件命名方式: 短橫線、駝峰 Vue組件注冊命名方式(駝峰和短橫線) 駝峰命名和短橫線命名的轉換 vue props命名最好直接使用kebab-case (短橫線隔開式) 命名 Mybatis 開啟駝峰式命名規則的映射解決mybatis plus 駝峰式命名規則 vue 組件屬性props,特性駝峰命名,連接線使用（轉）三種編程命名規范（匈牙利命名法、駝峰式命名法、帕斯卡命名法） Mybatis-Plus駝峰式命名規則配置 Mybatis駝峰命名