Vue。js(读音/vju& # 720;/,类似于视图)是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计.Vue的核心库只关注视图层,它不仅易于上,手还便于与第三方库或既有项目整合。另一方面,当与单文件组件和Vue生态系统支持的库结合使用时,Vue也完全能够为复杂的单页应用程序提供驱动。
学习笔记:在vue2.0中,父组件调用子组件时,想要将父组件中的函数体也做传递。
<强>//父组件.vue
& lt; template>
& lt; div>
& lt; ok-input: params=笆俊?回调=' callbackNum祝辞& lt;/ok-input>
& lt;/div>
& lt;/template>
& lt;脚本类型=拔谋?ecmascript-6”比;
从“. ./进口okInput ok-input/okinput.vue ';
出口默认{
道具:{},
数据(){
返回{
数量:{},
callbackNum:函数(x) {
console.log (x);
}
};
},
方法:{
},
组件:{
“ok-input”: okInput
}
};
& lt;/script>
<强>//子组件。vue
& lt; template>
& lt; div>
& lt;输入v模型=' numVal @change=' handleFun祝辞& lt;/input>
& lt;/div>
& lt;/template>
& lt;脚本类型=拔谋?ecmascript-6”比;
进口{输入,选择,选择,按钮}“element-ui”;
导入“element-ui/lib/theme-default/index.css”;
出口默认{
道具:{
参数:{
类型:对象,
默认值:{
类型:“
}
},
回调:{}
},
数据(){
返回{
谢:“哈”,
numVal:“
};
},
方法:{
handleFun (val) {
this.callback (val);//将参数传回父组件中的回调函数
}
},
组件:{
“el-input”:输入,
}
};
& lt;/script>
//父组件.vue
& lt; template>
& lt; div>
& lt; ok-input: params=笆淙搿盄change=' handleAge祝辞& lt;/ok-input>
& lt;/div>
& lt;/template>
& lt;脚本类型=拔谋?ecmascript-6”比;
从“. ./进口okInput ok-input/okinput.vue ';
出口默认{
道具:{},
数据(){
返回{
数量:{}
};
},
方法:{
handleAge (evt) {
console.log (evt.target.value);//接收从子组件传过来的当前对象
}
},
组件:{
“ok-input”: okInput
}
};
& lt;/script>
<强>//子组件。vue
& lt; template>
& lt; div>
& lt;输入v模型=' numVal @blur=' handleChange祝辞& lt;/input>
& lt;/div>
& lt;/template>
& lt;脚本类型=拔谋?ecmascript-6”比;
进口{输入,选择,选择,按钮}“element-ui”;
导入“element-ui/lib/theme-default/index.css”;
出口默认{
道具:{
参数:{
类型:对象,
默认值:{
类型:“
}
},
回调:{}
},
数据(){
返回{
谢:“哈”,
numVal:“
};
},
方法:{
handleChange (evt) {
这一点。美元发出(‘改变’,evt);//将当前对象evt传递到父组件
},
},
组件:{
“el-input”:输入,
}
};
& lt;/script>
以上所述是小编给大家介绍的Vue2.0父子组件传递函数的教程详解,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
