Vue子组件如何接收父组件方法并获取其返回值？
- 内容介绍
- 文章标签
- 相关推荐
本文共计923个文字，预计阅读时间需要4分钟。
目录 + 组件接收父组件方法并获取返回值 + 父组件 + GetCallback.vue + 子组件 + CallbackChild1.vue + 子组件接收父组件方法并获取返回值 + 项目中有时会遇到父子组件的情况
目录
- 子组件接收父组件方法并获取返回值
- 父组件 GetCallback.vue
- 子组件 CallbackChild1.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>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。
本文共计923个文字，预计阅读时间需要4分钟。
目录 + 组件接收父组件方法并获取返回值 + 父组件 + GetCallback.vue + 子组件 + CallbackChild1.vue + 子组件接收父组件方法并获取返回值 + 项目中有时会遇到父子组件的情况
目录
- 子组件接收父组件方法并获取返回值
- 父组件 GetCallback.vue
- 子组件 CallbackChild1.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>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。