溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2022-08-04 10:39:13 來源：億速云 閱讀：471 作者：iii 欄目：開發(fā)技術(shù)

本篇內(nèi)容主要講解“vue中如何實(shí)現(xiàn)子組件接收父組件方法并獲取返回值”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“vue中如何實(shí)現(xiàn)子組件接收父組件方法并獲取返回值”吧!

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

    項(xiàng)目中有時(shí)候會(huì)遇到父子組件傳值的問題，比如子組件需要接收父組件方法并獲取該方法返回值的時(shí)候。

    使用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í)候傳遞的數(shù)據(jù)子組件中不能有props的屬性，不然子組件的$attrs獲得的是空對(duì)象，

    代碼如下：

    <!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>

    到此，相信大家對(duì)“vue中如何實(shí)現(xiàn)子組件接收父組件方法并獲取返回值”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

    向AI問一下細(xì)節(jié)

    免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

    vue
    AI
    助
    手