快捷導(dǎo)航

vue子組件獲取到它父組件數(shù)據(jù)的4種方法

更新時(shí)間：2023年08月16日 08:49:41 作者：東西方集大成者

這篇文章主要給大家介紹了關(guān)于vue子組件獲取到它父組件數(shù)據(jù)的4種方法,對(duì)于vue來說組件之間的消息傳遞是非常重要的,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下

前言
0，普遍的是用this.$parent即可
1，在父組件中定義一個(gè)全局的數(shù)據(jù)對(duì)象，將要傳遞給子組件的數(shù)據(jù)保存在這個(gè)對(duì)象中：
2，在父組件的模板中，使用provide屬性將全局?jǐn)?shù)據(jù)對(duì)象注入到組件實(shí)例中：
3，在子組件中，使用inject屬性來注入父組件傳遞的全局?jǐn)?shù)據(jù)對(duì)象，然后就可以在子組件中使用這些數(shù)據(jù)了：
總結(jié)

前言

在Vue組件中，可以通過props屬性來接收來自父組件的數(shù)據(jù)，然后在組件中使用這些數(shù)據(jù)。如果父組件需要將它的數(shù)據(jù)傳遞給子組件，可以將這些數(shù)據(jù)通過props傳遞給子組件。

如果要在子組件中獲取嵌套它的頁面的數(shù)據(jù)，可以使用Vue的依賴注入功能來實(shí)現(xiàn)。依賴注入允許父組件向子組件傳遞一些全局的依賴項(xiàng)，包括數(shù)據(jù)、方法、插件等等。子組件可以通過訪問父組件的$parent屬性來獲取其父組件的數(shù)據(jù)，但這種方法不太優(yōu)雅，而且容易受到組件層次結(jié)構(gòu)的影響。

下面是一種更為優(yōu)雅的方法，使用Vue的依賴注入來獲取嵌套它的頁面的數(shù)據(jù)：

0，普遍的是用this.$parent即可

this.$parent.someData

1，在父組件中定義一個(gè)全局的數(shù)據(jù)對(duì)象，將要傳遞給子組件的數(shù)據(jù)保存在這個(gè)對(duì)象中：

export default {
  data() {
    return {
      globalData: {
        // 要傳遞給子組件的數(shù)據(jù)
        someData: 'Hello world'
      }
    }
  }
}

2，在父組件的模板中，使用provide屬性將全局?jǐn)?shù)據(jù)對(duì)象注入到組件實(shí)例中：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      globalData: {
        // 要傳遞給子組件的數(shù)據(jù)
        someData: 'Hello world'
      }
    }
  },
  provide() {
    return {
      globalData: this.globalData
    }
  }
}
</script>

3，在子組件中，使用inject屬性來注入父組件傳遞的全局?jǐn)?shù)據(jù)對(duì)象，然后就可以在子組件中使用這些數(shù)據(jù)了：

<template>
  <div>
    <p>{{ globalData.someData }}</p>
  </div>
</template>
<script>
export default {
  inject: ['globalData']
}
</script>

在上面的代碼中，父組件使用provide屬性將全局?jǐn)?shù)據(jù)對(duì)象注入到組件實(shí)例中。子組件使用inject屬性來注入父組件傳遞的全局?jǐn)?shù)據(jù)對(duì)象，然后就可以在子組件中通過this.globalData訪問這些數(shù)據(jù)了。

需要注意的是，provide和inject屬性只能用于祖先組件向后代組件傳遞數(shù)據(jù)，而不適用于子組件向父組件傳遞數(shù)據(jù)。如果需要在子組件中修改父組件的數(shù)據(jù)，應(yīng)該使用事件和$emit方法來實(shí)現(xiàn)。