vue子组件获取到它父组件数据的4种方法

前言

在Vue组件中，可以通过props属性来接收来自父组件的数据，然后在组件中使用这些数据。如果父组件需要将它的数据传递给子组件，可以将这些数据通过props传递给子组件。

如果要在子组件中获取嵌套它的页面的数据，可以使用Vue的依赖注入功能来实现。依赖注入允许父组件向子组件传递一些全局的依赖项，包括数据、方法、插件等等。子组件可以通过访问父组件的$parent属性来获取其父组件的数据，但这种方法不太优雅，而且容易受到组件层次结构的影响。

下面是一种更为优雅的方法，使用Vue的依赖注入来获取嵌套它的页面的数据：

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

this.$parent.someData

1，在父组件中定义一个全局的数据对象，将要传递给子组件的数据保存在这个对象中：

export default {
  data() {
    return {
      globalData: {
        // 要传递给子组件的数据
        someData: 'Hello world'
      }
    }
  }
}

2， 在父组件的模板中，使用provide属性将全局数据对象注入到组件实例中：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      globalData: {
        // 要传递给子组件的数据
        someData: 'Hello world'
      }
    }
  },
  provide() {
    return {
      globalData: this.globalData
    }
  }
}
</script>

3，在子组件中，使用inject属性来注入父组件传递的全局数据对象，然后就可以在子组件中使用这些数据了：

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

在上面的代码中，父组件使用provide属性将全局数据对象注入到组件实例中。子组件使用inject属性来注入父组件传递的全局数据对象，然后就可以在子组件中通过this.globalData访问这些数据了。

需要注意的是，provide和inject属性只能用于祖先组件向后代组件传递数据，而不适用于子组件向父组件传递数据。如果需要在子组件中修改父组件的数据，应该使用事件和$emit方法来实现。

总结

到此这篇关于vue子组件获取到它父组件数据的4种方法的文章就介绍到这了,更多相关vue子组件获取父组件数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！