Vue--vue中的组件、组件绑定事件和数据、私有组件、子组件，父子组件参数互传
一.公有组件以及组件的使用和特点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../vue2.4.4.js"></script>
</head> <body>
<!-- 定义一个vue的管理区块，（MVVM中的View） -->
<template id="tlogin">
<div>
用户名：<input type="text"><br>
密 码：<input type="text">
</div>
</template>
<!-- <script type="x-template" id="tlogin">
<div>
用户名：<input type="text"><br>
密 码：<input type="text">
</div>
</script> --> <div id="app">
<vue-login></vue-login>
</div>
</body>
<script>
//公有组件：
//注意：
// 1)所有的模板代码都都必须有一个根标签
// 2)如果组件的名称如首字母大写：
// a.所有的字母全部小写
// b.内部如果也有大写将大写将改为小写并且在这个字母之前加上一个“-” //1.0 将组件的定义和注册分为两步来执行
// // 定义格式：
// // Vue.extend({
// // template: "组件的html代码"
// // });
// var login = Vue.extend({
// template: "<h1>我是login</h1>"
// });
// // 注册：
// // 参数一：当前注册组件的名称
// // 参数二：组件对象
// // Vue.component("login",login)//向Vue中注册组件：
// Vue.component("login",login); //2.0组件的定义和注册一步到位
//使用组件时一定要给组件加上根标签
// Vue.component("login",{
// template: "<div>用户名：<input type='text'><br/>密 码：<input type='text'></div>"
// }); //3.0组件的使用三：
Vue.component("VueLogin",{
template: "#tlogin"
}); //4.0组件的使用四：
// Vue.component("login",{
// template: "#tlogin"
// }); // 实例化vue对象（MVVM中的View Model）
new Vue({
// vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
el:'#app'
})
</script>
</html>
二.给组件绑定事件和数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../vue2.4.4.js"></script>
</head> <body>
<!-- 定义一个vue的管理区块，（MVVM中的View） -->
<template id="reg">
<div>
<input type="text" v-model="name">
<input type="text" v-model="age">
<button @click="getValue">注册</button>
</div>
</template>
<div id="app">
<register></register>
</div> </body> <script>
//定义和注册
Vue.component("register",{
template:"#reg",
data:function() {
return {
name:"我是组件中的name属性",
age:18
}
},
methods:{
getValue:function() {
alert("我被点击了");
}
}
}); // 实例化vue对象（MVVM中的View Model）
new Vue({
// vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
el:'#app',
data:{
// 数据 （MVVM中的Model）
},
methods:{ }
})
</script>
</html>
三.私有组件 components
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../vue2.4.4.js"></script>
</head> <body>
<!-- 定义一个vue的管理区块，（MVVM中的View） -->
<template id="tlogin">
<div>
用户名<input type="text"><br>
密码: <input type="text">
</div>
</template>
<div id="app">
<login></login>
</div> </body> <script> // 实例化vue对象（MVVM中的View Model）
new Vue({
// vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
el:'#app',
data:{
// 数据 （MVVM中的Model）
},
components:{ //私有组件
"login":{
template:"#tlogin"
}
}
})
</script>
</html>
四.子组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../vue2.4.4.js"></script>
</head> <body>
<!-- 定义一个vue的管理区块，（MVVM中的View） -->
<div id="app">
<account></account>
<login></login><!-- 会报错，因为login是account组件的私有组件 --> </div> </body> <script>
// 定义组件
Vue.component("account",{
template:"<div>account<login></login><register></register></div>",
components:{
"login":{
template:"<div>login</div>",
},
"register":{
template:"<div>register</div>",
}
}
}); // 实例化vue对象（MVVM中的View Model）
new Vue({
// vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
el:'#app',
data:{
// 数据 （MVVM中的Model）
},
methods:{ }
})
</script>
</html>
五.使用component中的is来实现组件切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../vue2.4.4.js"></script>
</head> <body>
<!-- 定义一个vue的管理区块，（MVVM中的View） -->
<template id="account">
<div>
<a href="#" @click="componentId='login'">登录</a>
<a href="#" @click="componentId='register'">注册</a>
<!-- :is 相当于给component绑定组件，绑定is后面的值对应的组件 -->
<component :is="componentId"></component>
</div>
</template>
<div id="app">
<account></account>
</div>
</body>
<script>
Vue.component("account",{
template:"#account",
// 在父组件中添加一个componentId的属性，将来给上面模板中的component使用
data:function() {
return {
componentId:"login"
}
},
// methods:{
// register:function() {
// this.componentId = "register";
// }
// },
components:{
"login":{
template:"<span>login</span>"
},
"register":{
template:"<span>register</span>"
}
}
});
// 实例化vue对象（MVVM中的View Model）
new Vue({
// vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
el:'#app',
data:{
// 数据 （MVVM中的Model）
},
methods:{
}
})
</script>
</html>
六.父组件传值给子组件
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../vue2.4.4.js"></script>
</head> <body>
<!-- 定义一个vue的管理区块，（MVVM中的View） -->
<template id="account">
<div>account<br/>
<login :aname="name"></login>
</div>
</template>
<div id="app">
<account></account>
</div> </body> <script>
Vue.component("account", {
template: "#account",
data: function () {
return {
name: "account中的name"
}
},
components: {
"login": {
template: "<div>子组件输出：{{aname}}</div>",
props:["aname"] // 这个是用来接受将来父组件传递过来的参数的数据
}, }
}); // 实例化vue对象（MVVM中的View Model）
new Vue({
// vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
el: '#app',
data: {
// 数据 （MVVM中的Model）
},
methods: { }
}) </script> </html>
七.子组件传值给父组件
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../vue2.4.4.js"></script>
</head> <body>
<!-- 定义一个vue的管理区块，（MVVM中的View） -->
<template id="account">
<div>
{{name}}<br/>
<login @loginkey="getV"></login>
</div>
</template>
<div id="app">
<account></account>
</div> </body> <script>
Vue.component("account", {
template: "#account",
data: function () {
return { name: "" }
},
methods: {
getV: function (value) {
//接收子组件传递过来的参数
this.name = value;
}
},
components: {
"login": {
template: "<div><button @click='sendV'>点我将name传给父元素</button></div>",
data: function () {
return {
name: "login中的name"
}
},
methods: {
sendV: function () {
// 我们要将子组件的name属性设置给父组件
// 这个send方法需要一个键值对
this.$emit('loginkey', this.name);
}
}
} }, });
// 实例化vue对象（MVVM中的View Model）
new Vue({
// vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
el: '#app',
data: {
// 数据 （MVVM中的Model）
},
methods: { }
}) </script> </html>
Vue--vue中的组件、组件绑定事件和数据、私有组件、子组件，父子组件参数互传的更多相关文章
- vue v-io 父子组件双向绑定多个数据
vue-io-directive 可以减少使用emit,组件自带的v-model好像也只能设置一个 安装 npm i vue-io-directive 使用 import Vue from 'vue' ...
- 关于vue.js中class与style绑定的学习
练习代码: html: <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- vue项目中解决type=”file“ change事件只执行一次的问题
问题描述 在最近的项目开发中遇到了这样的一个问题,当我上传了一个文件时,我将获取到的文件名清空后,却无法再次上传相同的文件 <template> <div class="h ...
- Vue循环中多个input绑定指定v-model
Vue.js中提供了v-model可以双向绑定表单元素,这个方法可以非常方便的获得输入的值,但是有时候表单元素需要循环生成,在循环中要怎样获得指定输入框的值呢 这里介绍两种,一种是v-for中循环生成 ...
- jQuery中怎样阻止后绑定事件
你的代码在页面载入过程中已经完成事件绑定了,没有阻止后绑定的事件的办法了,不过可以删除当前指定节点的事件绑定.方法如下:$("#btn").click(function(){if( ...
- jQuery1.9及其以上版本中动态元素on绑定事件无效解决方案
jQuery 1.9/2.0/2.1及其以上版本无法使用live函数了,然而jQuery 1.9及其以上版本提供了on函数来代替.本文讲解了jQuery on函数的使用方法,以及在使用jQuery函数 ...
- FLASH CC 2015 CANVAS 中 createjs 移除绑定事件
myBtn.addEventListener("click", function(evt) { // do stuff... evt.remove(); // removes th ...
- jQuery中append html后绑定事件不起作用
事件一定要紧跟append之后, 否则append元素点击不起作用 $(function(){$('div').append('<ul><li id="appli" ...
- jQuery中bind()与on()绑定事件的区别
.on()方法比.bind()方法多一个参数selector .on()的selector参数是筛选出调用.on()方法的dom元素的指定子元素,如: $("ul").on('cl ...
随机推荐
- <每日一题>题目28：简单的python练习题(51-60)
#51.一行代码实现1-100的和 sum(range(1,101)) #52.如何在一个函数内部修改全局变量 ''' 利用global ''' #53.字典如何删除和合并2个字典 ''' del d ...
- Neo4j-Cypher语言语法
Neo4j-Cypher语言语法 梦飞扬 2018-03-15 264 阅读 Neo4j 本文是记录Neo4j图数据库中实用的Cypher语言语法. Cypher是什么 "Cypher&qu ...
- Activiti 变量设置
使用工作流的时候必定会附上一些变量.例如,请假的时候有填写请假理由,天数等等.可以用以下代码实现 public void setVariables(){ /**与任务(正在执行)*/ TaskServ ...
- 论文翻译—SPP-Net（目标检测）
SPPNet论文翻译 <Spatial Pyramid Pooling in Deep Convolutional Networks for Visual Recognition> Kai ...
- Codeforces 938G 线段树分治 线性基 可撤销并查集
Codeforces 938G Shortest Path Queries 一张连通图,三种操作 1.给x和y之间加上边权为d的边,保证不会产生重边 2.删除x和y之间的边,保证此边之前存在 3.询问 ...
- 微信小程序之组件的集合（五）
这个是学习复杂的组件的封装的,在课程中,主要实现的是书单上方的搜索功能组件的开发,这个应该是较之前的组件是有一定难度的,但是现在学到现在,感觉前端的内容和后端的内容比较起来,还是比较容易的,而且好多内 ...
- JZOJ5965【NOIP2018提高组D2T2】填数游戏
题目 作为NOIP2018的题目,我觉得不需要把题目贴出来了. 大意就是,在一个n∗mn*mn∗m的010101矩阵中,从左上角到右下角的路径中,对于任意的两条,上面的那条小于下面的那条.问满足这样的 ...
- 【linux之路】常用的命令
用bash插入代码 1.查看ubuntu的版本号 lsb_release –a //linux标准基础(Linux Standards Base):release发布 2.查看Ubuntu的内核 un ...
- skyline中遍历fly工程树
在skyline二次开发过程中,做空间分析总是要去读取工程中的shp图层.假设想获取工程树中“建筑物”图层,图层结构如下: 传统的方法是: var itemId=SGWorld.ProjectTree ...
- dubbo入门学习(六)-----dubbo原理
RPC原理 一次完整的RPC调用流程(同步调用,异步另说)如下: 1)服务消费方(client)调用以本地调用方式调用服务: 2)client stub接收到调用后负责将方法.参数等组装成能够进行网络 ...