vue中實現(xiàn)子組件接收父組件方法并獲取返回值

更新時間：2022年08月04日 09:11:15 作者：風(fēng)如也

這篇文章主要介紹了vue中實現(xiàn)子組件接收父組件方法并獲取返回值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

子組件接收父組件方法并獲取返回值

項目中有時候會遇到父子組件傳值的問題，比如子組件需要接收父組件方法并獲取該方法返回值的時候。

使用this.$emit('方法名', '參數(shù)1', '參數(shù)2')的方式，獲取到不是父組件方法的return值。但是我們可以將參數(shù)改為回調(diào)函數(shù)的形式，父組件里執(zhí)行該回調(diào)函數(shù)，返回值后給子組件，子組件再接收返回值。

示例：

父組件 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); // 父組件執(zhí)行作為參數(shù)的函數(shù)
? }
}
</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 {
? ?? ?// 子組件接收函數(shù)的值
? ? this.$emit('getData', (val: string) => { this.value = val });
? ? return this.value;
? }
}
</script>

子組件接收父組件的另一種方法

子組件獲取父組件傳遞的數(shù)據(jù)通常是通過props屬性接收父組件的傳遞過來的數(shù)據(jù)，

代碼如下：

<!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接收的父組件的數(shù)據(jù)，但是這時候傳遞的數(shù)據(jù)子組件中不能有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>

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: