vue子组件接收父组件方法并获取返回值
子组件接收父组件方法并获取方法返回值
·
项目中有时候会遇到父子组件传值的问题,比如子组件需要接收父组件方法并获取该方法返回值的时候。
使用this.$emit('方法名', '参数1', '参数2')
的方式,获取到不是父组件方法的return
值。但是我们可以将参数改为回调函数的形式,父组件里执行该回调函数,返回值后给子组件,子组件再接收返回值。
示例:
父组件 GetCallback.vue
<template>
<div>
我是父组件
<CallbackChild1 @getData="getData" />
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import CallbackChild1 from '@/components/CallbackChild1.vue';
@Component({
components: {
CallbackChild1,
},
})
export default class GetCallback extends Vue {
getData(callback: FunctionConstructor): void {
const name = '我是父组件的值';
callback(name); // 父组件执行作为参数的函数
}
}
</script>
子组件 CallbackChild1.vue
<template>
<div>
<p>我是子组件</p>
<button @click="getDataFromParent">子组件获取父组件返回值</button>
<span>返回值:{{ value }}</span>
</div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
@Component
export default class CallbackChild1 extends Vue {
value = '';
getDataFromParent(): string {
// 子组件接收函数的值
this.$emit('getData', (val: string) => { this.value = val });
return this.value;
}
}
</script>
更多推荐
已为社区贡献31条内容
所有评论(0)