好资源导航 » 文章资讯 » Vue2.0父子组件传递函数的教程详解

Vue2.0父子组件传递函数的教程详解

2023-09-23 04:07:05 56

Vue.js是什么

Vue.js(读音/vjuː/，类似于view)是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和Vue生态系统支持的库结合使用时，Vue也完全能够为复杂的单页应用程序提供驱动。

学习笔记：在vue2.0中，父组件调用子组件时，想要将父组件中的函数体也做传递.

1.通过props：需要从子组件传参数到父组件时适用

//父组件.vue



importokInputfrom'../ok-input/okinput.vue';
exportdefault{
props:{},
data(){
return{
number:{},
callbackNum:function(x){
console.log(x);
}
};
},
methods:{
},
components:{
'ok-input':okInput
}
};

//子组件.vue



import{Input,Select,Option,Button}from'element-ui';
import'element-ui/lib/theme-default/index.css';
exportdefault{
props:{
params:{
type:Object,
default:{
type:''
}
},
callback:{}
},
data(){
return{
x:'hah',
numVal:''
};
},
methods:{
handleFun(val){
this.callback(val);//将参数传回父组件中的回调函数
}
},
components:{
'el-input':Input,
}
};

2.通过$emit：只需获得当前操作对象时适用

//父组件.vue


importokInputfrom'../ok-input/okinput.vue';
exportdefault{
props:{},
data(){
return{
number:{}
};
},
methods:{
handleAge(evt){
console.log(evt.target.value);//接收从子组件传过来的当前对象
}
},
components:{
'ok-input':okInput
}
};

//子组件.vue



import{Input,Select,Option,Button}from'element-ui';
import'element-ui/lib/theme-default/index.css';
exportdefault{
props:{
params:{
type:Object,
default:{
type:''
}
},
callback:{}
},
data(){
return{
x:'hah',
numVal:''
};
},
methods:{
handleChange(evt){
this.$emit('change',evt);//将当前对象evt传递到父组件
},
},
components:{
'el-input':Input,
}
};

总结

以上所述是小编给大家介绍的Vue2.0父子组件传递函数的教程详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

Vue2.0父子组件传递函数的教程详解

热门推荐

随机推荐