vue 父子组件相互传递数据
例子一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href=""> <script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div id="app">
{{message}} <son-component v-for="post in posts" :title="post.title" :key="post.id" @e-world="getData"></son-component> </div> <script >
Vue.component('son-component',{
data:function(){
return{
sondata:"子数据"
}
},
methods:{
send(){
// console.log(this); //此处的this表示当前子组件实例
this.$emit('e-world',this.sondata); //使用$emit()触发一个事件，发送数据
}
} ,
props:['title'],
template:'<div> <h4>子组件接收父组件的数据是：{{title}}</h4> <button @click="send">将子组件的数据向上传递给父组件</button> <input v-model="sondata"></input> </div>'
}) new Vue({
el:'#app',
data:{
message:1,
posts:[
{id:1,title:'标题一'},
{id:2,title:'标题二'},
{id:2,title:'标题三'}
],
postFontSize:1
},
methods:{
getData(mes){
this.message=mes;
}
} })
</script>
</body>
</html>
例子二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父子组件及组件间数据传递</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="itany">
<my-hello></my-hello>
</div> <template id="hello">
<div>
<h3>我是hello父组件</h3>
<h3>访问自己的数据：{{msg}},{{name}},{{age}},{{user.username}}</h3>
<h3>访问子组件的数据：{{sex}},{{height}}</h3>
<hr> <my-world :message="msg" :name="name" :age="age" @e-world="getData"></my-world>
</div>
</template> <template id="world">
<div>
<h4>我是world子组件</h4>
<h4>访问父组件中的数据：{{message}},{{name}},{{age}},{{user.username}}</h4>
<h4>访问自己的数据：{{sex}},{{height}}</h4>
<button @click="send">将子组件的数据向上传递给父组件</button>
</div>
</template> <script>
var vm=new Vue({ //根组件
el:'#itany',
components:{
'my-hello':{ //父组件
methods:{
getData(sex,height){
this.sex=sex;
this.height=height;
}
},
data(){
return {
msg:'网博',
name:'tom',
age:23,
user:{id:9527,username:'唐伯虎'},
sex:'',
height:''
}
},
template:'#hello',
components:{
'my-world':{ //子组件
data(){
return {
sex:'male',
height:180.5
}
},
template:'#world',
// props:['message','name','age','user'] //简单的字符串数组
props:{ //也可以是对象，允许配置高级设置，如类型判断、数据校验、设置默认值
message:String,
name:{
type:String,
required:true
},
age:{
type:Number,
default:18,
validator:function(value){
return value>=0;
}
},
user:{
type:Object,
default:function(){ //对象或数组的默认值必须使用函数的形式来返回
return {id:3306,username:'秋香'};
}
}
},
methods:{
send(){
// console.log(this); //此处的this表示当前子组件实例
this.$emit('e-world',this.sex,this.height); //使用$emit()触发一个事件，发送数据
}
}
}
}
}
}
});
</script>
</body>
</html>
vue 父子组件相互传递数据的更多相关文章
- Vue.js 父子组件相互传递数据
父传子 : 子组件接收变量名=父组件传递的数据 如::f-cmsg="fmsg" 注意驼峰问题 子传父:@子组件关联的方法名 = 父组件接受的方法名 如:@func=" ...
- vue组件-构成组件-父子组件相互传递数据
组件对于vue来说非常重要,学习学习了基础vue后,再回过头来把组件弄透! 一.概念 组件意味着协同工作,通常父子组件会是这样的关系:组件 A 在它的模版中使用了组件 B . 它们之间必然需要相互通信 ...
- Vue父子组件相互传值及调用方法的方案
Vue父子组件相互传值及调用方法的方案 一.调用方法: 1.父组件调用子组件方法: 2.子组件调用父组件方法: 参考:https://www.cnblogs.com/jin-zhe/p/9523782 ...
- vue 父子组件属性传递
父子组件属性传递 注意:0.谁被引用,谁就算子组件 1.属性命名最好完全小写,否则需要如下格式转换:myAttr == my-attr 2.引入的vue组件后必须通过 components 注册才能 ...
- vue.js 组件之间传递数据
前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...
- vue父子组件相互传值的实例
当子组件需要向父组件传递数据时,就要用到自定义事件 子组件用 $emit()来触发事件,父组件用$on()来监昕子组件的事件 父组件也可以直接在子组件的自定义标签上使用 v-on 来监昕子组件触发的自 ...
- vue组件父子组件之间传递数据
举个栗子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- vue父子组件写法，数据传递，顺便封装 element-ui的弹窗组建
父组件如下: <template> <div class="print"> <el-button @click="bbclick" ...
- vue 父子组件相互传值
子传父 逻辑: 单击子组件的按钮 ,触发它的单击事件 通过 $emit 触发父级自定义事件 并传一个值给父级 <div id="id"> <h3>儿子 ...
随机推荐
- CS小分队第二阶段冲刺站立会议（5月29日）
昨日成果:昨天在为主界面设计自主添加应用快捷方式功能,连续遇到困难. 遇到的困难:1.string字符串数组无法在单击事件中使用,提示string无法在eventargs中检索,尝试了各种方式都不行 ...
- 一些有趣的erlang项目
这里会收集一些erlang项目,有需可以转. erlang-bookmarks Scaling Erlang High Performance Erlang - Finding Bottlenecks ...
- Docker 安装与常用命令介绍
docker的镜像文件作用就是:提供container运行的文件系统层级关系(基于AUFS实现),所依赖的库文件.已经配置文件等等. 安装docker yum install -y docker 启动 ...
- 使用字符界面 qemu-kvm 创建虚拟机
qemu-kvm的基本用法:指定系统类型,CPU运行模式,NUMA(Non Uniform Memory Access Architecture), 软驱设备,光驱设备,硬件设备 # 查看qemu ...
- [转帖]Linux 的UTC 和 GMT
1.问题 对于装有Windows和Linux系统的机器,进入Windows显示的时间和Linux不一致,Linux中的时间比Windows提前8个小时. 2.解决方法 修改/etc/default/r ...
- web.py 笔记
1.涉及到id=‘id’的情况,需要加入 vars=locals() ,因为id在python里有id() 函数 db.delete('entries', where = 'id = $id', ...
- redis 同步化操作
异步化操作是很麻烦的的.不好控.下面介绍个同步化的库bluebird.用法很简单.看下你还子就知道了 const redis = require('redis'); const bluebird = ...
- Java ISO 8601时间格式转换
common-lang包: String pattern = "YYYY-MM-dd'T'HH:mm:ssZZ"; System.out.println(DateFormatUti ...
- DNS原理及解析过程
本文主要参考自:http://369369.blog.51cto.com/319630/812889 并做了小幅修改 什么是DNS? 因特网上的主机和人类一样,也可以使用多种方式进行识别.主机的一种识 ...
- Android性能测试工具：Emmagee介绍
简介 Emmagee是监控指定被测应用在使用过程中占用机器的CPU.内存.流量资源的性能测试小工具.该工具的优势在于如同windows系统性能监视器类似,它提供的是数据采集的功能,而行为则基于用户真实 ...