- 首先定义子组件
子组件名称假设为child.vue中设置props可以让父组件赋值,或者设置回调函数
props: {
isShow: {
type: Boolean,
default: false
},
after: {
type: Function,
default: null
}
type为Function就可以实现函数回调
子组件在调用方法时,可以给回调函数赋值
methods: {
add () {
let self = this
let params = {
...
}
...post(params)
.then(res => {
if (success) {
//比如成功之后调用回调函数,并给父组件传值
self.after(res.data)
} else { }
}).catch(err => {
})
}
}
- 在父组件中
假设父组件为parent.vue
首先在script中引用子组件
<script>
import Child from './child'
export default {
components: {Child},
methods: {
after (resp) {
...
}
}}
</script>
在template中引用导入的Child并给子组件中定义的props传值即可
<template>
<div>
<Child v-bind:is-show="true" v-bind:after="after">text</Child>
</div>
</template>
after方法中可以处理子组件传的值
当然也可以用Bus或者Vuex。
不过我是后端java开发就没有研究了,以后需要用到再研究吧。