Vue组件创建和组件传值
Vue创建组件的方式
使用Vue.Extend()和Vue.component全局注册组件
首先我们定义一个组件并接收
var com1 =Vue.extend({
template:"<h3>这是通过Vue.extend创建的组件</h3>"
});
然后我们全局注册这个组件
Vue.component('mycom1',com1);
这样我们就可以在我们的代码中使用我们的mycom1组件了
<div id="app">
<mycom1></mycom1>
</div>
需要注意的是，如果我们注册的组件名称是以驼峰命名法来命名的，那么我们在使用的时候将不能使用原本注册时的命名，如下的写法时错误的
//定义
Vue.component('myCom1',com1);
//使用
<div id="app">
<myCom1></myCom1>
</div>
我们在使用的时候需要将驼峰命名法的两个单词使用‘-’进行分开，并且更加推荐‘-’左右两端的单词均使用小写，如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
<script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
</head>
<body>
<div id="app">
<my-com1></my-com1>
</div>
<script>
var com1 =Vue.extend({
template:"<h3>这是通过Vue.extend创建的组件</h3>"
});
Vue.component('myCom1',com1);
var vm = new Vue({
el:'#app',
data:{
}
})
</script>
</body>
</html>
同时我们可以将构造和注册结合在一起
Vue.component('myCom1',Vue.extend({
template:"<h3>这是通过Vue.extend创建的组件</h3>"
}));
更加简化的方式
Vue.component('myCom1',{
template:"<h3>这是通过Vue.extend创建的组件</h3>"
});
需要注意的是，我们不管使用哪种方式来定义组件，template中定义的顶级元素只能有一个，否则会出现错误
使用Vue.component()配合Vue的templete标签来定义组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
<script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
</head>
<body>
<div id="app">
<my-com1></my-com1>
</div>
<template id="mycom2">
<h3>这是通过Templete定义的组件，在html代码中有智能提示</h3>
</template>
<script>
Vue.component('myCom1',{
template:"#mycom2"
});
var vm = new Vue({
el:'#app',
data:{
}
})
</script>
</body>
</html>
需要注意的是，上述的定义方式都是定以的全局Vue对象均可使用，下面我们定义一个私有的组件
Vue.component私有组件
Vue对象内部有一个components组件，可以定义我们想要的组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
<script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
</head>
<body>
<div id="app">
<login></login>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
},
components:{
login:{
template:'<h3>这是私有的login组件</h3>'
}
}
})
</script>
</body>
</html>
同时仍然可以使用上述的template方式来定义组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
<script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
</head>
<body>
<div id="app">
<login></login>
</div>
<template id="app2">
<h3>这是私有组件配合template方式定义的组件</h3>
</template>
<script>
var vm = new Vue({
el:'#app',
data:{
},
components:{
login:{
template:'#app2'
}
}
})
</script>
</body>
</html>
组件的data
定义的组件可以有自己的data数据域，但是data必须为一个function且必须返回一个对象格式的数据，除此之外和Vue对象中的data的使用方法完全一致
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
<script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
</head>
<body>
<div id="app">
<login></login>
</div>
<template id="app2">
<h3>这是私有组件配合template方式定义的组件---{{msg}}</h3>
</template>
<script>
var vm = new Vue({
el:'#app',
data:{
},
components:{
login:{
template:'#app2',
data:function(){
return {
msg:"这是组件中的数据"
}
}
}
}
})
</script>
</body>
</html>
组件切换
使用v-if和v-else实现组件切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
<script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
</head>
<body>
<div id="app">
<a href="#" @click.prevent="flag=true">登录</a>
<a href="#" @click.prevent="flag=false">注册</a>
<login v-if="flag"></login>
<register v-else="flag"></register>
</div>
<template id="app2">
<h3>这是登录组件</h3>
</template>
<script>
var vm = new Vue({
el:'#app',
data:{
flag:true
},
components:{
login:{
template:'#app2',
},
register:{
template:'<h3>注册组件</h3>',
}
}
})
</script>
</body>
</html>
不过使用这种方式只能实现两种类型的组件切换
使用component元素进行组件切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
<script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
</head>
<body>
<div id="app">
<a href="#" @click.prevent="comName='login'">登录</a>
<a href="#" @click.prevent="comName='register'">注册</a>
<component :is="comName"></component>
</div>
<template id="app2">
<h3>这是登录组件</h3>
</template>
<script>
var vm = new Vue({
el:'#app',
data:{
comName:'login'
},
components:{
login:{
template:'#app2',
},
register:{
template:'<h3>注册组件</h3>',
}
}
})
</script>
</body>
</html>
我们使用定义在data中的属性来切换component中要展示的组件，使用:is来代表最后要展示的组件的值
父子组件传值
父组件向子组件传递数据
子组件默认无法直接访问到父组件（对象）中的数据，需要使用v-bind表达式来传递，结合组件的props属性来使用，即可达到父组件向子组件传递数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
<script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
</head>
<body>
<div id="app">
<login v-bind:parentmsg="msg"></login>
</div>
<template id="app2">
<h3>这是私有组件配合template方式定义的组件--{{parentmsg}}</h3>
</template>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:"这是父组件中的数据"
},
components:{
login:{
template:'#app2',
data(){
return {
name:'zhangsan',
age:'24'
}
},
props:['parentmsg']
}
}
})
</script>
</body>
</html>
需要注意的是，通过props传递过来的数据是不推荐被修改的，强行修改会报错
props中定义的属性全部都是由父组件传递给子组件的
而子组件data中的数据是组件私有，可以被修改的
子组件向父组件传递数据
子组件向父组件传值是通过父组件向子组件传递事件实现的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
<script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
</head>
<body>
<div id="app">
<login @func="show"></login>
</div>
<template id="app2">
<input type="button" value="子组件按钮" @click="myclick" />
</template>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:"这是父组件中的数据"
},
methods:{
show(data){
console.log("这是父组件的事件"+data)
}
},
components:{
login:{
template:'#app2',
data(){
return {
name:'zhangsan',
age:'24'
}
},
props:['parentmsg'],
methods:{
myclick(){
this.$emit('func',this.name);
}
}
}
}
})
</script>
</body>
</html>
从如上代码可知，父组件调用子组件中的数据需要借助this.$emit来进行传递，传递的第一个参数都是函数名，后面的参数都是传递的数据，可以传递单个属性或者是对象
Vue组件创建和组件传值的更多相关文章
- vue组件创建的三种方式
1.使用Vue.extend创建全局的Vue组件 //1.1 使用vue.extend创建组件 var com1 = Vue.extend({ //通过template属性指定组件要展示的html结构 ...
- vue组件创建学习总结
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 黑马vue---56-58、vue组件创建的三种方式
黑马vue---56-58.vue组件创建的三种方式 一.总结 一句话总结: 不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素 1.使用 Vu ...
- Vue全局组件创建三种方法
<my-com1></my-com1> <my-com2></my-com2> <template id="tmp1"> ...
- vue第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件)
第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件) #课程目标 掌握vue实例的相关属性和方法的含义和使用 了解vue的数据响应原理 熟悉创建组件,了解全局 ...
- Vue.js学习 Item11 – 组件与组件间的通信
什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...
- 1219 Vue项目创建及基础
目录 vue项目 1. 项目创建 cmd创建 可视化创建 2. 项目启动 vue重新构建依赖 pycharm管理vue项目 3. 项目目录介绍 index.html index.js App.vue ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- vue组件的基本使用，以及组件之间的基本传值方式
组件(页面上的每一个部分都是组件) 1.三部分:结构(template),样式(style),逻辑(script) 2.组件的作用:复用 3.模块包含组件 4.组件创建: 1.全局组件:Vue ...
随机推荐
- LeetCode.1009-十进制数的补码(Complement of Base 10 Integer)
这是小川的第377次更新,第404篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第238题(顺位题号是1009).每个非负整数N都具有二进制表示.例如,5可以二进制表示为 ...
- 【VS开发】error C2220: 警告被视为错误 - 没有生成“object”文件
http://blog.csdn.net/cay22/article/details/5613625 这种错误的原因是:原因是该文件的代码页为英文,而我们系统中的代码页为中文. 解决方案: 1. 启动 ...
- 【转帖】Linux系统上面qemu 模拟arm
零基础在Linux系统搭建Qemu模拟arm https://blog.csdn.net/weixin_42489042/article/details/81145038 自己没搞定 改天再试试 感谢 ...
- AKKA学习(二) 未完
Actor调用 从上面的例子中,我们可以大概的对AKKA在JAVA中的使用有一个全局的概念.这里我们在稍微细致的讲解一下. 在JAVA中使用AKKA进行开发主要有这几个步骤: 定义消息模型. 创建Ac ...
- MyBatis Mapper XML 详解
MyBatis Mapper XML 详解 MyBatis 真正的力量是在映射语句中.这里是奇迹发生的地方.对于所有的力量,SQL 映射的 XML 文件是相当的简单.当然如果你将它们和对等功能的 JD ...
- equals与== 和toString方法
/** * equals()方法的使用 * * 1.java.lang.Object类中的equals()方法的定义: * * public boolean equals(Object obj) { ...
- 原生js：click和onclick本质的区别（转https://www.cnblogs.com/web1/p/6555662.html）
原生javascript的click在w3c里边的阐述是DOM button对象,也是html DOM click() 方法,可模拟在按钮上的一次鼠标单击. button 对象代表 HTML 文档中的 ...
- 在Vue项目中加载krpano全景图
在Vue-cli项目中做krpano全景图编辑器的时候,由于js插件的路径是动态的,做的过程中遇到了加载不到资源的难题,在网上搜索了好久也没找到合适的办法,最后想到了可能是JS加载的问题,于是解决了问 ...
- Python 从大型csv文件中提取感兴趣的行
帮妹子处理一个2.xG 大小的 csv文件,文件太大,不宜一次性读入内存,可以使用open迭代器. with open(filename,'r') as file # 按行读取 for line in ...
- scrapy在settings中添加redis，可以实现断点续传
DUPEFILTER_CLASS='scrapy_redis.dupefilter.RFPDupeFilter'SCHEDULER = 'scrapy_redis.scheduler.Schedule ...