关于vue中的组件、prop以及事件的命名规范

最新推荐文章于 2022-10-23 11:00:00 发布
最新推荐文章于 2022-10-23 11:00:00 发布
阅读量841 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lianflower/article/details/118195399
版权

组件：建议使用kebab-case（短横线命名）

prop：建议使用cameCase（驼峰命名）

事件：建议使用kebab-case（短横线命名）


                

        

        

    




    

      

        

            

              
                
                  lianflower
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  2
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
vue框架下代码规范总结

				
			

			

				

					xinguanyiban07的专栏
				

				

					04-30
					
					585
					
				

			

		

		

			
				
废话少说，上干货。这里只是列取规则，详情例子对照参考vue官网风格指南
一、规范命名
主要防止命名冲突、便于理解语义和后期维护
1、组件名为多个词
组件名应该始终是多个单词的，根组件 App 以及 、 之类的 Vue 内置组件除外。
如：todo-item
2、props属性定义要尽量详细
如：
props: {
  status: {
    type: String,
    required...

			
		

	



                

              
                



	

		

			

				
					
vue组件书写规范

				
			

			

				

					weixin_30555125的博客
				

				

					10-11
					
					362
					
				

			

		

		

			
				
vue组件书写规范
import引入原则: 
// import { mapState, mapGetters, mapActions, mapMutations } form 'vuex' // 涉及到状态管理的组件优先引入vuex

// import component from 'components/xxxxxx.component' // components

// import d...

			
		

	



                


  
              

                


	

		

			

				
					
vue props规范写法

				
			

			

				

					weixin_42432439的博客
				

				

					10-29
					
					1477
					
				

			

		

		

			
				
props: {
name: {
required: true, // 设置required就不要设置default
type: String
},
res: {
type: Array,
default: function() {
// Array和Object的默认值的设置都是function
return []
}
},
time: {
type: Number,
default: 0
}
...

			
		

	





	

		

			

				
					
对于Vue代码执行流程的理解

				
			

			

				

					weixin_42075821的博客
				

				

					10-12
					
					241
					
				

			

		

		

			
				
初学Vue，文章中有理解不正确的地方，希望大神们可以指正，我会及时改正，不断完善，不断进步。

首先，一个Vue项目都会有index.html 、main.js 、App.vue这三个文件。
在Vue中我们会经常提到“组件”，通俗来讲，它就是后缀名为.vue文件，也就是说后缀名为.vue文件都被称为组件。
Vue是单页面形式开发，我们Vue项目中的所有组件都会通过index.html文件进行渲染加载。
注意事项：
1、在main.js文件的Vue实例中，定义了App.vue是根组件。
2、根组件中，也就是&

			
		

	



		

			
		



	

		

			

				
					
vue中props的两种写法

				
			

			

				

					云
				

				

					03-04
					
					1161
					
				

			

		

		

			
				
props: ["svgInfoData", "component_prop"],
  props: {
    svgInfoData: {
      type: Array,
      default: () => [],
    },
    component_prop: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },






			
		

	





	

		

			

				
					
vue组件命名和props命名代码详解

				
			

			

				

					10-16
				

			

		

		

			
				
下面将详细讲解Vue组件命名和props命名的规则及最佳实践。  首先，Vue组件的命名有以下几种方式：  1. **kebab-case（短横线命名）**：例如`my-component`。这种命名方式在HTML中书写最为直观，因为HTML属性名称不...

			
		

	





	

		

			

				
					
Vue组件中prop属性使用说明实例代码详解

				
			

			

				

					08-27
				

			

		

		

			
				
Vue 组件中 Prop 属性使用说明实例代码详解  Vue 组件中 Prop 属性是一个非常重要的概念，它允许开发者在组件之间传递数据。 Prop 属性可以是静态的，也可以是动态的。静态的 Prop 属性可以直接在模板中传入值，而...

			
		

	





	

		

			

				
					
关于vue组件内部命名规范的一些思考和意见

				
			

			

				

					01-20
				

			

		

		

			
				
在Vue组件中，有几个关键的区域需要考虑命名规范：  1. **组件名**：Vue推荐使用kebab-case（短横线分隔）命名组件，例如`my-component`。这样做可以使组件名在HTML中看起来更清晰，同时遵循Web组件的标准。  2. **...

			
		

	





	

		

			

				
					
Vue项目中ESlint规范示例代码

				
			

			

				

					10-16
				

			

		

		

			
				
以下是一些在Vue项目中常见的ESLint配置示例，这些规则涵盖了Vue组件和JavaScript语法的多个方面：  1. `vue/max-attributes-per-line`: 这个规则规定了Vue组件中属性的最大数量，当超过限制时，应将它们分成多行。...

			
		

	





	

		

			

				
					
vue组件名命名规范

				
			

			

				

					weixin_43837268的博客
				

				

					10-10
					
					1690
					
				

			

		

		

			
				
紧密耦合的组件名

和父组件紧密耦合的子组件应该以父组件名作为前缀命名。


// bad
components/
|- TodoList.vue
|- TodoItem.vue
└─ TodoButton.vue

// good
components/
|- TodoList.vue
|- TodoListItem.vue
└─ TodoListItemButton.vue
...

			
		

	





	

		

			

				
					
VUE模板及组件的使用

				
			

			

				

					weixin_30869099的博客
				

				

					11-02
					
					361
					
				

			

		

		

			
				
一、vue模板安装
二、组件的使用
三、父子组件传值
四、子组件对父组件添加事件
五、markdown编辑器

一、vue模板安装
1.全局安装vue

npm install vue-cli -g


2.到指定文件夹下,下载模板

vue init webpack-simple


3.下载生产环境依赖

npm install


npm...

			
		

	





	

		

			

				
					
Vue.js 组件编码规范

				
			

			

				

					weixin_30355437的博客
				

				

					03-13
					
					111
					
				

			

		

		

			
				
Vue.js 组件编码规范（最下文附有本人写的demo地址）


目标
本规范提供了一种统一的编码规范来编写Vue.js代码。这使得代码具有如下的特性：

其它开发者或是团队成员更容易阅读和理解。
IDEs 更容易理解代码，从而提供高亮、格式化等辅助功能
更容易使用现有的工具
更容易实现缓存以及代码包的分拆

本指南为De Voorhoede参考RiotJS 编码...

			
		

	





	

		

			

				
					
vue组件命名规范-分享

				
			

			

				

					qq_44472790的博客
				

				

					04-04
					
					2837
					
				

			

		

		

			
				
一个组件在封装和使用的时候的命名规范–回顾
1.vue2.0版本文档介绍的以下2种组件命名方式：
第一种：使用 kebab-case（推荐使用这种，遵循 W3C 规范中的自定义组件名：字母全小写且必须包含一个连字符）
Vue.component('my-component-name', { /* ... */ })

第一个参数 my-component-name就是当前组件的名字，是我们自己定义...

			
		

	





	

		

			

				
					
vue规范规则

				
			

			

				

					aoqiaolang0919的博客
				

				

					09-04
					
					257
					
				

			

		

		

			
				
vue组件，数据通信，样式，JS的规范规则。对vue官方风格指南的总结归类并加入自己的规范，在团队小组中使用。
1.项目名/文件目录命名：
kebab-case（- 连接）：
项目名：vue-admin
文件目录：table-module
2.组件规范：2.1 组件名为多个单词：  组件名应该始终是多个单词的，根组件 App 以及 <transition>、&l...

			
		

	





	

		

			

				
					
vue组件的3种书写形式

				
			

			

				

					weixin_30724853的博客
				

				

					03-14
					
					111
					
				

			

		

		

			
				
第一种使用script标签

<!DOCTYPE html>
<html>
    <body>
        <div id="app">
            <my-component></my-component>
        </div>

        <-- 注意：使...

			
		

	





	

		

			

				
					
【前端】2.持续总结一下Vue书写规范，包含了元素，组件，注释，指令等

				
			

			

				

					小冷coding的博客
				

				

					10-23
					
					883
					
				

			

		

		

			
				
持续总结了元素，组件，注释指令等规范

			
		

	





	

		

			

				
					
vue语法 基本指令

				
			

			

				

					ling_xy的博客
				

				

					08-01
					
					228
					
				

			

		

		

			
				
文章目录一.目录及几个主要文件说明二.vue语法vue基本指令1.数据绑定指令2.元素属性绑定 v-bind3.元素显示隐藏4.条件语句指令5.集合绑定 v-for6.类别绑定 class style7.元素的事件绑定
一.目录及几个主要文件说明
目录结构：

build文件：打包之后的项目文件
config：配置目录（包括端口之类）
node_modules：依赖包文件
src：开发目录文件【开发只使用这个】 包括：

assets：放置一些图片（如logo）
components：放置组件文件。可以不用

			
		

	





	

		

			

				
					
vue的十一种书写规范

				
			

			

				

					wyk760629476的专栏
				

				

					04-29
					
					421
					
				

			

		

		

			
				
1.created watch不要调用方法，可以用watch中的原有属性控制，声明时候就执行渲染方法

2.props要驼峰式命名

3.事件命名要短线分隔

4.props要添加约束，默认值，必填规则等

5.单实例组件要以The开头

6.v-for要添加key以免渲染无序

7.v-for不能与v-if一起使用,可以用computed

8.保持指令简写的一致性，都用或者都不用

9.模板表...

			
		

	





	

		

			

				
					
vue页面中如何使用组件

					
最新发布

				
			

			

				

					05-13
				

			

		

		

			
				
在 Vue 页面中使用组件，需要先在组件中注册，然后在页面中引用。

1. 注册组件

在 Vue 组件中，可以使用 Vue.component() 方法注册组件。例如，下面注册了一个名为 "my-component" 的组件：

```
Vue.component('my-component', {
  // 组件选项
})
```

2. 在页面中使用组件

在页面中使用组件时，可以直接在模板中使用组件名。例如，下面在一个 Vue 页面中使用刚刚注册的 "my-component" 组件：

```
<template>
  <div>
    <my-component></my-component>
  </div>
</template>
```

注意，组件名需要使用 kebab-case（短横线分隔命名）。

此外，还可以在组件中使用 props（属性）和 events（事件），实现组件之间的数据传递和交互。例如：

```
// 在组件中定义 props 和 events
Vue.component('my-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>',
  methods: {
    handleClick() {
      this.$emit('clicked');
    }
  }
})

// 在页面中使用组件，并传递 props 和监听 events
<template>
  <div>
    <my-component :message="myMessage" @clicked="handleClick"></my-component>
  </div>
</template>
<script>
export default {
  data() {
    return {
      myMessage: 'Hello, World!'
    }
  },
  methods: {
    handleClick() {
      console.log('Component clicked!');
    }
  }
}
</script>
```

在上面的示例中，组件 "my-component" 接受一个名为 "message" 的 prop，用于在模板中显示文本。当组件内部的元素被点击时，调用 handleClick() 方法，触发了一个名为 "clicked" 的事件，该事件由组件向外部发送。在页面中，使用 v-bind 指令将 "myMessage" 数据传递给了 "my-component" 组件，并使用 v-on 指令监听了 "clicked" 事件，调用了页面中的 handleClick() 方法。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值