溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“vue中如何實現子組件接收父組件方法并獲取返回值”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue中如何實現子組件接收父組件方法并獲取返回值”吧!
項目中有時候會遇到父子組件傳值的問題，比如子組件需要接收父組件方法并獲取該方法返回值的時候。
使用this.$emit('方法名', '參數1', '參數2')的方式，獲取到不是父組件方法的return值。但是我們可以將參數改為回調函數的形式，父組件里執行該回調函數，返回值后給子組件，子組件再接收返回值。
示例：
<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><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中如何實現子組件接收父組件方法并獲取返回值”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
