Vue自定义组件并引入

      今天，bug菌为大家带来一期帝王级干货，有关于前端vue的组件教学，深入指引大家在vue中如何创建自定义的组件，并且在vue中引入你自定义的组件；

      具有很好的教学价值，希望小伙伴们根据这篇文章可以有所收获，建议小伙伴们先收藏后阅读哦。

      小伙伴们如果觉得文章不错，点赞、收藏、评论，分享走一起呀，记得给bug菌来个一键三连~~

      好了，我们开始这期的正文吧。

#1、在你的项目中专门创建一个放置自定义组件的文件夹（我是放在了components底下的common中，分类好日后方便维护，本文以table.vue为例）

#2、在你要添加的页中加入要引入的模块,注意驼峰命名的方式（本文为例：<v-table></v-table>，因为我在定义table模块的时候定义了name：v-table，所以引用的时候，也必须得用所在table模块中name定义好的名字）；

#3、在index.vue中引入table.vue模块 ；如下：

    
    

      
      

       
       

      
      
      
      

       
       

        
        //index.vue 页面 ，引入v-table模块
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
        <div 
        
        class=
        
        "table">
       
       
      
      

      
      

       
       

      
      
      
      

       
       
    
        
        <v-table></v-table> 
        
        //这就是你引入的自定义模块；注意是驼峰命名法
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
        </div>
       
       
      
      
    
    

#4、在index.vue页面引入该组件(注意：table.vue，我是在index.vue页面中添加了模块<v-table>,不是html标签，其实就是vue引入新的子组件）

    
    

      
      

       
       

      
      
      
      

       
       

        
        //index.vue
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
        <script>
       
       
      
      

      
      

       
       

      
      
      
      

       
       
  
        
        import vTable 
        
        from 
        
        '../../components/common/table'  
        
        //table.vue（注意，我在index.vue页面中添加了模块<v-table>,不是html标签，其实就是vue引入新的子组件）
       
       
      
      

      
      

       
       

      
      
      
      

       
       
    
        
        export 
        
        default {
       
       
      
      

      
      

       
       

      
      
      
      

       
       
        
        
        name: 
        
        "index",
       
       
      
      

      
      

       
       

      
      
      
      

       
       
      
        
        components: {
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                    vTable
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                },
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            }
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
        </script>
       
       
      
      
    
    

ps：说白了，自定义组件就好比封装，把一些公共的模块抽取出来，然后写成单独的的工具组件或者页面，在需要的页面中就直接引入即可。

#5、另外，为了防止在同一页面写入过多的代码，不方便后期维护，便可以把整个页面分成多个小模块，然后在主页面进行模块引入，创建包括引入步骤都是一样的。

比如：

总结：

vue组件命名问题：

1、别用驼峰式命名 因为 vue   webpack编译后 ，他统一会变成小写（顾名思义：骆驼式命名法就是当变量名或函数名是由一个或多个单词连结在一起，而构成的唯一识别字时，第一个单词以小写字母开始；从第二个单词开始以后的每个单词的首字母都采用大写字母，例如：myFirstName、myLastName，这就叫驼峰命名；你们学会了吗）

2、组件命名最好加个前缀 比如    <v-table></v-table>或者<v_table></v_table>

---

❤如果文章对您有所帮助，就请在文章末尾的左下角把大拇指点亮吧！(#^.^#)；

❤如果喜欢bug菌分享的文章，就请给bug菌点个关注吧！(๑′ᴗ‵๑)づ╭❤～；

❤对文章有任何问题欢迎小伙伴们下方留言或者入群探讨【群号：708072830】；

❤鉴于个人经验有限，所有观点及技术研点，如有异议，请直接回复参与讨论(请勿发表攻击言论，谢谢）；

❤版权声明：本文为博主原创文章，转载请附上原文出处链接和本文声明，版权所有，盗版必究！(*^▽^*).

</article>