Vue.js组件遇到的那些坑

对于绝大多数开发人员来讲，组件是使用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>

posted @ 2017-10-07 18:33 TateWang 阅读(2845) 评论(0) 收藏举报

刷新页面返回顶部

Vue.js组件遇到的那些坑

公告