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>儿子 ...
随机推荐
- 梯度下降算法以及其Python实现
一.梯度下降算法理论知识 我们给出一组房子面积,卧室数目以及对应房价数据,如何从数据中找到房价y与面积x1和卧室数目x2的关系? 为了实现监督学习,我们选择采用自变量x1.x2的线性函数来评估因变 ...
- call appiy
其实就是动态的改变this了,下面例子就说明了... function add(a, b){ console.dir(this); } function sub(a, b){ console.dir( ...
- ie6下，莫名被复制出一段文字解决
在IE6下使用浮动可能会出现文字重复的情况. 在IE6下,浮动层之间有注释文字的话,之前那个浮动层的内容文字就有可能遭遇一个“隐形”的复制,但是代码里查看文字可并没有多出来. 看个例子: HTML & ...
- Android 对话框(Dialogs)
对话框是提示用户作出决定或输入额外信息的小窗口. 对话框不会填充屏幕,通常用于需要用户采取行动才能继续执行的模式事件. 1.对话框设计 如需了解有关如何设计对话框的信息(包括语言建议),请阅读对话框设 ...
- Scrum立会报告+燃尽图（十月十五日总第六次）：视频上传及选题介绍工作
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2196 Scrum立会master:田良 一.小组介绍 组长:付佳 组员: ...
- map的默认排序和自定义排序
STL的容器map为我们处理有序key-value形式数据提供了非常大的便利,由于内部红黑树结构的存储,查找的时间复杂度为O(log2N). 一般而言,使用map的时候直接采取map<typen ...
- JAVA之路(一)
距离做下复习JAVA并学好JAVA的决定已经过去一周了,我买了慕课网的JAVA入门视频,在图书馆借了三本关于JAVA的书——两本是JAVA入门经典,一本是JAVA WEB开发宝典.我的计划是短时间内复 ...
- Google Professional Data Engineer(PDE)考试
在国内参加PDE考试的人比较少,导致资料也很少.我在19年1月30号去上海参加PDE考试,参加前也是完全没底,因为时间短资料少,但幸运的是顺利通过了.回过头来看,其中有些技巧和重点,在此做一些总结,希 ...
- OSG学习：LOD、数据分页、动态调度
LOD(level of detail):是指根据物体模型的结点在显示环境中所处的位置和重要度,决定物体渲染的资源分配,降低非重要物体的面数和细节度,从而获得高效率的渲染运算.在OSG的场景结点组织结 ...
- Docker 安装与常用命令介绍
docker的镜像文件作用就是:提供container运行的文件系统层级关系(基于AUFS实现),所依赖的库文件.已经配置文件等等. 安装docker yum install -y docker 启动 ...