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 ...
随机推荐
- SW数据库结构列表
数据表列表 PE_Admin:管理员信息表 PE_Advertisement:广告信息表 PE_AdZone:版位信息表 PE_Announce:公告信息表 PE_AreaCollection:采集信 ...
- 关于python DataFrame的学习记录
df_1 = pd.DataFrame({'A': [0, 1, 2], 'B': [3, 4, 5]}) print df_1 默认左边行index0往上递增,AB为顶部标识,数组内为内容 loc— ...
- fwt优化+树形DP HDU 5909
//fwt优化+树形DP HDU 5909 //见官方题解 // BestCoder Round #88 http://bestcoder.hdu.edu.cn/ #include <bits/ ...
- vue 生产环境和测试环境的配置
我们引用的是axios 给src目录增加 api 文件夹 里面写上index.js // 配置API接口地址 var root = process.env.API_ROOT // 引用axios va ...
- UITableViewHeaderFooterView can't change custom background when loading from nib
down voteforite I've created a custom UITableViewHeaderFooterView and successfully load from nib int ...
- 打包成exe可执行文件的方法
Python安装扩展库与打包成exe可执行文件的方法 1.安装扩展库的几种方法. 首先可能需要使用 pip install --upgrade pip 来升级本机的pip程序.然后在命令提示符环境(即 ...
- Python的格式化输出--制作名片
效果图 代码如下: name = input("Your name:")age = int(input("Your age:"))job = input(&qu ...
- JasperReport生命周期3
JasperReports的主要目的是为了在一个简单而灵活的方式创建页面为导向,准备好打印文档.下面的流程图描述了一个典型的工作流程,同时创建报表. 如在图片的生命周期具有以下明显的阶段 设计报表在这 ...
- getBoundingClientRect介绍
getBoundingClientRect用于获取元素相对与浏览器视口的位置 由于getBoundingClientRect()已经是w3c标准,所以不用担心兼容,不过在ie下还是有所区别 { top ...
- 如何处理HTML5新标签的浏览器兼容问题?
方法一 : 1.使用静态资源的html5shiv包 <!--[if lt IE9]> <script src="http://cdn.static.runoob.com/l ...