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>儿子 ...
随机推荐
- SQL行列轉換方法(詳細例子)
普通行列转换(version 1.0)仅针对sql server 2000提供静态和动态写法,version 2.0增加sql server 2005的有关写法. 问题:假设有张学生成绩表(tb)如下 ...
- “Hello World！”团队第五周第三次会议
今天是我们团队“Hello World!”团队第五周召开的第三次会议. 双十一大家过的怎么样?由于组内其他成员被“剁手”,今日会议记录由我来写. 博客内容: 一.会议时间 二.会议地点 三.会议成员 ...
- Eclipse/myEclipse 代码提示/自动提示/自动完成设置(转)
一.设置超级自动提示 设置eclipse/myEclipse代码提示可以方便开发者,不用在记住拉杂的单词,只用打出首字母,就会出现提示菜单.如同dreamweaver一样方便. 1.菜单window- ...
- 福大软工1816：Beta（3/7）
Beta 冲刺 (3/7) 队名:第三视角 组长博客链接 本次作业链接 团队部分 团队燃尽图 工作情况汇报 张扬(组长) 过去两天完成了哪些任务 文字/口头描述 参与开发关键词提醒部分 展示GitHu ...
- 第八次作业（课堂实战）- 项目UML设计
本次作业博客 团队信息 队名:起床一起肝活队 原组长: 白晨曦(101) 原组员: 李麒 (123) 陈德斌(104) 何裕捷(214) 黄培鑫(217) 王焕仁(233) 林志华(128) 乐忠豪( ...
- phpdisk 盲注 &前台任意用户登录
代码审核 文件 plugins\phpdisk_client\passport.php 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 $str ...
- 小程序 坐标算距离 （copy）
var EARTH_RADIUS = 6378137.0; //单位M var PI = Math.PI; function getRad(d){ retu ...
- java & maven pom
java & maven pom https://maven.apache.org/pom.html http://www.tutorialspoint.com/maven/maven_pom ...
- Delphi编程防止界面卡死的方法经验分享
Delphi编程防止界面卡死的方法经验分享! 1.循环里面防止界面卡死的方法可以使用Application.ProcessMessages: 例如下列方法: var n: Integ ...
- 【loj2319】[NOIP2017]列队 Splay（卡过）
题目描述 给出一个 $n\times m$ 的矩阵,第 $i$ 行第 $j$ 列的数为 $(i-1)\times m+j$ . 现在有 $q$ 次操作,每次操作给出位置 $(x,y)$ ,取出 $(x ...