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>儿子 ...
随机推荐
- hadoop的safemode 安全模式
hadoop启动检查副本块数,就会进入safemode safemode的相关情况 虽然不能进行修改文件的操作,但是可以浏览目录结构.查看文件内容的. 在命令行下是可以控制安全模式的进入.退出和查看的 ...
- Vue工作原理小结
本文能帮你做什么?1.了解vue的双向数据绑定原理以及核心代码模块2.缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考 ...
- C++ Primer Plus学习：第二章
C++入门第二章:开始学习C++ 进入C++ 首先,以下是一个C++程序: //myfirst.cpp 显示一行文字 #include<iostream> //预处理器编译指令 int m ...
- Qt使用QNetworkAccessManager实现Ftp操作
版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:Qt使用QNetworkAccessManager实现Ftp操作 本文地址:http: ...
- 微信小程序 对接口常用
@import '../expert/expert.wxss'; FZ._get('https://didu2.didu86.com/issun/index.php/Home/goodstype/ ...
- sleep() 与 wait()的比较
1.这两个方法来自不同的类分别是,sleep来自Thread类,和wait来自Object类. sleep是Thread的静态类方法,谁调用的谁去睡觉,即使在a线程里调用了b的sleep方法,实际上还 ...
- PHP对象类型转换
其他数据类型转换为对象类型 其他数据类型转换为对象类型,得到的结果是:内置标准类(stdclass)的一个对象! 语法形式为: $obj1 = (object) 其他类型数据: 数组转换为对象:数 ...
- virtio 之后的数据直连
在上一篇中说了virtio这种半虚拟化方案之后,还有一种全虚拟化的方案,这种全虚拟化的方案中,直接宿主机上的设备,直接被虚拟化成了n个设备,然后这些设备可以直接被加载进guest os中当做一个普通的 ...
- idea导出包含main函数的jar
1.首先打开File->project stucture->Artifacts 2.按照下图方式: 3.选择面main函数的所在的类,选择MAINFEST.MF问的生成路径 这里一定选择 ...
- 在Delphi中动态地使用SQL查询语句 Adoquery sql 参数 冒号
在Delphi中动态地使用SQL查询语句 在一般的数据库管理系统中,通常都需要应用SQL查询语句来提高程序的动态特性.下面介绍如何在Delphi中实现这种功能.在Delphi中,使用SQL查询语句的途 ...