对于绝大多数开发人员来讲，组件是使用Vue.js不能逃避的话题，当然实际开发也会有很多需要注意的地方，一下均为实际操作中遇到的坑，接下来逐一为大家分享：

1.定义并注册组件必须要在声明Vue实例之前，否则组件无效：

//第一步，全局注册

Vue.component("name",{

  template:`

     <div>组件dom结构</div>

     `

})

//然后声明实例

var vm=new Vue({

    el:"#app"

})

2.涉及到传值时，props数组中必须采用驼峰命名法：

    Vue.component("common-select",{

        //此处使用btn-value则会报错

        props:["btnValue","list"],

        template:`

            <div class="select-box">

                <a href="#" class="searchBtn" v-text="btnValue"></a>

                <input type="text" name="" class="search-con">

                <com-list :list="list"></com-list>

            </div>

        `

    })

3.多层组件传值时，props数组中对应的值，命名必须相同：

   //list由外层组件向内层组件传值时，list名字必须相同，

   //此处与形参不同，两个组件属于不同的命名空间。

   //名字不同则会报错

    Vue.component("common-select",{

        props:["btnValue","list"],

        template:`

            <div class="select-box">

                <a href="#" class="searchBtn" v-text="btnValue"></a>

                <input type="text" name="" class="search-con">

                <com-list :list="list"></com-list>

            </div>

        `

    })

    Vue.component("com-list",{

        props:["list"],

        template:`

        <ul class="select-items">

            <li v-for="item in list">{{item}}</li>

        </ul>

        `

    })

4.组件间传值时，需要注意，传递的是静态值，还是动态数据：

        <!-- 静态值相当于自定义属性，而动态数据则需要绑定 -->

        <common-select btn-value="search" :list="select1"></common-select>

        <common-select btn-value="搜索" :list="select2"></common-select>

5.在组件内部定义数据时，需要使用函数返回对象（此对象不能为全局的静态对象）

//此数据用于说明静态全局对象不能用于组件内部

var testObj={

　　selectData:""

}

Vue.component("common-select",{

        props:["btnValue","list"],

        data:function(){

　　　　　　//此处若改为return testObj 将会使每个组件使用共同的数据

            return {

                selectData:""

            }

        },

        template:`

            <div class="select-box">

                <a href="#" class="searchBtn" v-text="btnValue"></a>

                <input type="text" name="" class="search-con" v-model="selectData">

                <com-list :list="list" v-on:doSelect="getSelect"></com-list>

            </div>

        `,

        methods:{

            getSelect:function(item){

                console.log(item);

                this.selectData=item;

            }

        }

    })

6.利用自定义事件完成子组件向父组件传值时，需要搞清楚为哪个组件绑定事件接收函数

    Vue.component("common-select",{

        props:["btnValue","list"],

        data:function(){

            return {

                selectData:""

            }

        },

        //自定义时间接收函数应绑定在com—list自定义标签内

        template:`

            <div class="select-box">

                <a href="#" class="searchBtn" v-text="btnValue"></a>

                <input type="text" name="" class="search-con" v-model="selectData">

                <com-list :list="list" v-on:doSelect="getSelect"></com-list>

            </div>

        `,

        methods:{

            getSelect:function(item){

                console.log(item);

                this.selectData=item;

            }

        }

    })

***源码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        *{margin: 0;padding: 0;}

        body{font-family:"Microsoft YaHei";}

        ul,li{list-style: none;}

        em,i{font-style: normal;}

        a:hover,a:active,a:link,a:visited{text-decoration: none}

        .clear-fix:after{content:".";visibility: hidden;font-size: 0;display: block;clear: both;height: 0;}

        .wrap{width: 100%;}

        .wrap-1200{width:1200px;margin-left: auto;margin-right: auto;}

        .select-box{width:400px;background: #666fff;padding:20px;position: relative;}

        .select-items{width:100%;border:1px solid #fff;border-top:none;display: none;}

        .search-con{width:100%;height:40px;border: 1px solid #ddd;background:#fff;}

        .searchBtn{

            position: absolute;

            top: 20px;

            line-height: 40px;

            padding:0 10px;

            text-align: center;

            right: 20px;

        }

        .select-items li{

            line-height:40px;

            color: #fff;

            padding:0 15px;

            box-sizing: border-box;;

        }

        .select-items li:hover{

            background:#fff;

            color:#666fff;

            cursor: pointer;

        }

        .disBlock{

            display:block;

        }

    </style>

</head>

<body>

    <div id="app">

        <!-- 静态值相当于自定义属性，而动态数据则需要绑定 -->

        <common-select btn-value="search" :list="select1"></common-select>

        <common-select btn-value="搜索" :list="select2"></common-select>

    </div>

</body>

<script type="text/javascript" src="js/vue.js"></script>

<script type="text/javascript">

    Vue.component("common-select",{

        props:["btnValue","list"],

        data:function(){

            return {

                selectData:"",

                focusState:false

            }

        },

        //自定义时间接收函数应绑定在com—list自定义标签内

        template:`

            <div class="select-box">

                <a href="#" class="searchBtn" v-text="btnValue"></a>

                <input type="text" name="" class="search-con" v-model="selectData" @click="focusState=!focusState">

                <com-list :list="list" v-on:doSelect="getSelect" :class="{disBlock:focusState}"></com-list>

            </div>

        `,

        methods:{

            getSelect:function(item){

                this.focusState=!this.focusState;

                this.selectData=item;

            }

        }

    })

    Vue.component("com-list",{

        props:["list"],

        template:`

        <ul class="select-items">

            <li v-for="item in list" @click="selectItem(item)">{{item}}</li>

        </ul>

        `,

        methods:{

            selectItem:function(item){

                console.log(this);

                this.$emit("doSelect",item)

            }

        }

    })

    var vm=new Vue({

        el:"#app",

        data:{

            select1:["teitei","pomelott","dudu"],

            select2:["kobe","jordan","harden"]

        }

    })

</script>

</html>

Vue.js组件遇到的那些坑的更多相关文章

  1. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  2. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

  3. 如何理解vue.js组件的作用域是独立的

    vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...

  4. 浅尝Vue.js组件(一)

    本篇目录: 组件名 组件注册 全局注册 基础组件的自动化全局注册 局部注册 在模块系统中局部注册 Prop 单向数据流 Prop验证 类型检查 非Prop特性 替换/合并已有的特性 禁用特性继承 自定 ...

  5. Vue.js 组件编码规范

    本规范提供了一种统一的编码规范来编写 Vue.js 代码.这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解. IDEs 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...

  6. Vue.js 组件的三个 API：prop、event、slot

    组件的构成 一个再复杂的组件,都是由三部分组成的:prop.event.slot,它们构成了 Vue.js 组件的 API.如果你开发的是一个通用组件,那一定要事先设计好这三部分,因为组件一旦发布,后 ...

  7. Vue.js组件的重要选项

    Vue.js组件的重要选项 实例化Vue对象一些很重要的选项,Vue的所有数据都是放在data里面的,Vue的参数是个对象,对象里面的字段叫做data,data里面也是对象,data也可以写作是thi ...

  8. Vue.js组件学习

    组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素.组件系统提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用. 一个简单组件例子(全局注册) &l ...

  9. Vue.js组件示例

    一 外部引入文件:(全局注册) //建模版 var mycomponent=Vue.extend( {template:"<div><a href='#'>我爱Jav ...

随机推荐

  1. 【洛谷P1101】单词方阵

    题目大意:给一 \(n \times n\) 的字母方阵,内可能蕴含多个 \("yizhong"\) 单词.单词在方阵中是沿着同一方向连续摆放的.摆放可沿着 8 个方向的任一方向, ...

  2. 适用于vue项目的打印插件（转载）

    出处:https://www.cnblogs.com/lvyueyang/p/9847813.html // 使用时请尽量在nickTick中调用此方法 //打印 export default (re ...

  3. [六字真言]6.吽.SpringMVC中上传大小异常填坑

    最近在讲课的时候,遇到了关于上传文件过大的时候浏览器无法响应的问题,配置了捕获异常,有的学生浏览器好使,有的学生浏览器不好用!莫名其妙! MaxUploadSizeExceededException进 ...

  4. Linux遇到的问题（一）Ubuntu报“xxx is not in the sudoers file.This incident will be reported” 错误解决方法

    提示错误信息 www@iZ236j3sofdZ:~$ ifconfig Command 'ifconfig' is available in '/sbin/ifconfig' The command ...

  5. 官方资料&一些好的博客与技术点

    https://technet.microsoft.com/zh-cn/library/hh848794.aspxzh   https://msdn.microsoft.com/en-us/power ...

  6. [转载]win7休眠后网络断开怎么办？如何设置？

    http://jingyan.baidu.com/article/8065f87fc87d0423312498af.html 有时会遇到在Windows7系统休眠模式下会自动断开网络连接,唤醒系统也是 ...

  7. import和require的区别

    node编程中最重要的思想就是模块化,import和require都是被模块化所使用. 遵循规范 require 是 AMD规范引入方式 import是es6的一个语法标准,如果要兼容浏览器的话必须转 ...

  8. javascript的this分别代表什么

    鉴于大家对this到底代表的是什么有疑问,现在将我个人理解的this的情况整理如下.有错误请指正. 第一种情况:  如果是一个全局的function,则this相当于window对象. 这个打印出来的 ...

  9. golang container heap&sort

    go语言也自己的容器数据结构.主要有list.heap和ring package main import ( "container/heap" "fmt" &q ...

  10. 灵活、可高度自定义的——Progress进度圈、弹窗、加载进度、小菊花

    DDProgressHUD的介绍 提供了四种类型的展示: 显示无限旋转的加载图(比如小菊花,可以自定义),显示文字信息.网络刷新时经常用到. 显示加载进度的动画,也可以显示文字.网络下载时用的比较多, ...