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>
Vue.js组件遇到的那些坑的更多相关文章
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
- 如何理解vue.js组件的作用域是独立的
vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...
- 浅尝Vue.js组件(一)
本篇目录: 组件名 组件注册 全局注册 基础组件的自动化全局注册 局部注册 在模块系统中局部注册 Prop 单向数据流 Prop验证 类型检查 非Prop特性 替换/合并已有的特性 禁用特性继承 自定 ...
- Vue.js 组件编码规范
本规范提供了一种统一的编码规范来编写 Vue.js 代码.这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解. IDEs 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...
- Vue.js 组件的三个 API：prop、event、slot
组件的构成 一个再复杂的组件,都是由三部分组成的:prop.event.slot,它们构成了 Vue.js 组件的 API.如果你开发的是一个通用组件,那一定要事先设计好这三部分,因为组件一旦发布,后 ...
- Vue.js组件的重要选项
Vue.js组件的重要选项 实例化Vue对象一些很重要的选项,Vue的所有数据都是放在data里面的,Vue的参数是个对象,对象里面的字段叫做data,data里面也是对象,data也可以写作是thi ...
- Vue.js组件学习
组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素.组件系统提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用. 一个简单组件例子(全局注册) &l ...
- Vue.js组件示例
一 外部引入文件:(全局注册) //建模版 var mycomponent=Vue.extend( {template:"<div><a href='#'>我爱Jav ...
随机推荐
- 移动H5开发入门教程：12点webAPP前端开发经验
如果你是一名移动H5前端开发人员,25学堂的小编认为下面的分享的12点webAPP前端开发经验是你必须掌握的基础知识点.算是一篇移动H5开发入门教程吧! 1. viewport:也就是可视区域.对于桌 ...
- d3浅谈
d3是一个及其庞大的库,有20个模块,大小也达到了216kb,是JQ1.x的2倍多,JQ3.x的3倍多,JQ本来就挺笨重的一个库,d3更是如此,但是它的功能确实很强悍~ d3的定位是一个科学计算库,并 ...
- Java Message Service学习（一）
一,背景 近期需要用到ActiveMQ接收Oozie执行作业之后的返回结果.Oozie作为消息的生产者,将消息发送给ActiveMQ,然后Client可以异步去ActiveMQ取消息. ActiveM ...
- html5 canvas从圆开始
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- ODPS_ele—UDF Python API
自定义函数(UDF) UDF全称User Defined Function,即用户自定义函数.ODPS提供了很多内建函数来满足用户的计算需求,同时用户还可以通过创建自定义函数来满足不同的计算需求.UD ...
- 【转】教你何时开启水果机上的HDR拍照
原址:http://news.mydrivers.com/1/175/175922.htm 苹果在iOS 4.1操作系统中为iPhone 4增加了一项有趣的新功能:HDR拍照.虽然目前市场上支持HDR ...
- Linux笔记之如何分割文件或管道流：split
一.简介 在Linux中合并文件可以使用cat命令,后面跟上要合并的文件然后重定向到一个新的文件中即可,甚至可以追加合并.但如果要将一个大文件分割为多个小文件应该如何操作呢? 在Linux的coreu ...
- 在pycharm和tensorflow环境下运行nmt
目的是在pycharm中调试nmt代码,主要做了如下工作: 配置pycharm编译环境 在File->Settings->Project->Project Interpreter 设 ...
- 【CTF WEB】服务端请求伪造
服务端请求伪造 如你所愿,这次可以读取所有的图片,但是域名必须是www开头 测试方法 POST /index.php HTTP/1.1 Host: 218.2.197.236:27375 Conten ...
- Apache+Tomcat+mod_jk实现负载均衡
最近公司提出了负载均衡的新需求,以减轻网站的高峰期的服务器负担.趁空闲时间我就准备了一下这方面的知识,都说有备无患嘛.网上相关资料很多,但是太散.我希望可以通过这篇随笔,系统的总结. 一.Tomcat ...