多平台统一管理软件接口,如何实现多平台统一管理软件接口
411
2023-03-26
Vue2.0父子组件传递函数的教程详解
vue.js 是什么
Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。
学习笔记:在vue2.0中,父组件调用子组件时,想要将父组件中的函数体也做传递.
1. 通过props :需要从子组件传参数到父组件时适用
// 父组件.vue
import okInput from '../ok-input/okinput.vue';
export default {
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';
export default {
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
imzcnzsiiport okInput from '../ok-input/okinput.vue';
export default {
props: http://{},
data() {
return {
number: {}
};
},
methods: {
handleAge(evt) {
console.log(evt.target.value); // 接收从子组件传过来的当前对象
}
},
components: {
'ok-input': okInput
}
};
// 子组件.vue
import {Input, Select, Option, Button} from 'element-uzcnzsiii';
import 'element-ui/lib/theme-default/index.css';
export default {
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父子组件传递函数的教程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,会及时回复大家的。在此也非常感谢大家对我们网站的支持!
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~