标签：lan isp 驼峰 否则 java :active ops com none
对于绝大多数开发人员来讲，组件是使用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>
***源码如下：
<!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%;display:none;border:1px solid #fff;border-top: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; } .search-con:focus + .select-items{ 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"], 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> ` }) var vm=new Vue({ el:"#app", data:{ select1:["teitei","pomelott","dudu"], select2:["kobe","jordan","harden"] } }) </script> </html>
标签：lan isp 驼峰 否则 java :active ops com none
原文地址：http://www.cnblogs.com/pomelott/p/7635422.html
