vue中实现子组件接收父组件方法并获取返回值

更新时间：2022年08月04日 09:11:15 作者：风如也

这篇文章主要介绍了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>

子组件接收父组件的另一种方法

子组件获取父组件传递的数据通常是通过props属性接收父组件的传递过来的数据，

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<my-child :msg='msg'></my-child>
</div>
</body>
</html>

<script src="./node_modules//vue//dist//vue.min.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'helloword'
},
components: {
'myChild': {
props: ['msg'],
mounted() {
console.log(this.$attrs)
},
components: {
'myChildren': {
props: ['msg'],
template:
`<span>{{msg}}</span>
`
}
},
template: `<div>{{msg}}
<my-children :msg='msg'></children>
</div>`
}
}
})
</script>

也可以通过子组件的$attrs接收的父组件的数据，但是这时候传递的数据子组件中不能有props的属性，不然子组件的$attrs获得的是空对象，

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<my-child :msg='msg'></my-child>
</div>
</body>
</html>

<script src="./node_modules//vue//dist//vue.min.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'helloword'
},
components: {
'myChild': {
// props:['msg'],
mounted() {
console.log(this.$attrs)
},
components: {
'myChildren': {
//props:['msg'],
template:
`<span>{{this.$attrs.msg}}</span>
`
}
},
template: `<div>{{this.$attrs.msg}}
<my-children :msg='$attrs.msg'></children>
</div>`
}
}
})
</script>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue实现循环切换动画
这篇文章主要为大家详细介绍了vue实现循环切换动画，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-10-10
使用Vant如何实现数据分页,下拉加载
这篇文章主要介绍了使用Vant实现数据分页及下拉加载方式。具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
关于Vue.js一些问题和思考学习笔记（2）
这篇文章主要为大家分享了关于Vue.js一些问题和思考的学习笔记,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
vue中用动态组件实现选项卡切换效果
本篇文章主要介绍了vue中用动态组件实现选项卡切换效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-03-03
Vue3和Vite不得不说的那些事
这篇文章主要为大家详细介绍了Vue3和Vite的那些事，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
VUE+Canvas实现简单五子棋游戏的全过程
这篇文章主要给大家介绍了关于VUE+Canvas实现简单五子棋游戏的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-05-05
Vue如何实现自动触发功能
这篇文章主要介绍了Vue如何实现自动触发功能，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-01-01
vue react中的excel导入和导出功能
当我们把信息化系统给用户使用时，用户经常需要把以前在excel里录入的数据导入的信息化系统里，这样为用户提供了很大的方便，这篇文章主要介绍了vue中或者react中的excel导入和导出,需要的朋友可以参考下
2023-09-09
vue微信分享出来的链接点开是首页问题的解决方法
这篇文章主要为大家详细介绍了vue微信分享出来的链接点开是首页问题的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-11-11
Vue使用v-model封装el-pagination组件的全过程
通过封装el-pagination组件开发自定义分页组件的类似文章网上已经有很多了，但看了一圈，总是不如意，于是决定还是自己动手搞一个，对v-model封装el-pagination组件相关知识感兴趣的朋友一起看看吧
2021-07-07