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 ...
随机推荐
- PAT甲级——A1073 Scientific Notation
Scientific notation is the way that scientists easily handle very large numbers or very small number ...
- 13_数据的划分和介绍之sklearn数据集
1.数据集是如何划分?训练数据和评估数据不能使用相同数据,不然自己测自己,会使得准确率虚高,在遇到陌生数据时,不够准确. 2.数据集的获取: 通过load或者fetch方法. 3.数据集进行分割: 训 ...
- 【核心核心】8.Spring【AOP】注解方式
1.引入jar包 sprig框架基础包+JUntil整合包+日志包+AOP包 spring的传统AOP的开发的包 spring-aop-4.2.4.RELEASE.jar com.springsour ...
- git的三个区域比较
工作区: 暂存区: 提交区: 工作区与暂存区比较:git diff 工作区与提交区比较:git diff 提交hash码或者HEAD 暂存区与提交区比较:git diff --cached 两个不同提 ...
- EasyUI Tree与Datagrid联动
效果图 这是一个简单的solr检索的例子 输入关键词,显示树 选择一个节点,得到该节点下文档信息 代码: JSP: 重点是标红的URL传递 <body> <d ...
- Elasticsearch 5.6.4 window 安装并简单使用head
1.现在elasticsearch安装包 https://www.elastic.co/downloads/elasticsearch 2.解压elasticsearch-5.6.4.zip 到需要安 ...
- VS2010中Cocos2d-x中文乱码问题
不罗嗦,直接进入主题,VS2010的默认编码是"GB2312",那么以创建一个label为例,当我们使用 CCLabelTTF::create(const char *label, ...
- Result结果类型详解
配置Result 在 struts.xml 文件中,<result> 元素用于配置 Result 逻辑视图与物理视图之间的映射关系,它有两个可选属性 name 和 type.其中,name ...
- /etc/inittab配置文件详解
init的进程号是1,从这一点就能看出,init进程是系统所有进程的起点,Linux在完成核内引导以后,就开始运行init程序,init程序需要读取设置文件/etc/inittab.inittab是个 ...
- Leetcode532.K-diff Pairs in an Array数组中的K-diff数对
给定一个整数数组和一个整数 k, 你需要在数组里找到不同的 k-diff 数对.这里将 k-diff 数对定义为一个整数对 (i, j), 其中 i 和 j 都是数组中的数字,且两数之差的绝对值是 k ...