vue 子组件继承父组件属性

### Vue.js 子组件继承父组件属性方法

#### 使用 `provide` 和 `inject`

为了使子组件能够访问父组件的数据或方法，可以利用 Vue 的提供/注入机制。这种方式允许祖辈组件向其所有的子孙后代传递数据。

// 父组件
export default {
  data() {
    return {
      message: "来自父级的消息"
    };
  },
  provide() {
    return {
      parentMessage: this.message,
      greet: this.greet // 如果有方法也需要共享的话
    };
  },
  methods: {
    greet() {
      console.log('你好！');
    }
  }
};

当定义好要提供的内容之后，在任何层次的子组件里都可以通过 `inject` 来接收这些被提供的项：

// 子组件
import { defineComponent } from 'vue';

export default defineComponent({
  inject: ['parentMessage', 'greet'],
  mounted() {
    console.log(this.parentMessage); // 输出："来自父级的消息"
    this.greet();                    // 调用并执行父组件的方法
  }
});

这种方法非常适合用于跨多层嵌套的情况下的状态管理或者是配置信息的传播[^1]。

#### 利用 Props 下传数据

另一种常见的做法就是使用 props 将父组件的数据作为参数传递给子组件。这适用于父子关系较为紧密的情形下，并且有助于保持清晰的数据流向。

<!-- 父组件 -->
<template>
  <child-component :message="parentMsg"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  name: 'ParentComponent',
  components: { ChildComponent },
  data() {
    return {
      parentMsg: '这是父组件的信息'
    };
  }
}
</script>

而在对应的子组件中，则可以通过声明接受 prop 参数来获取这个消息：

// 子组件
props: ['message'], // 声明预期收到名为 message 的prop
mounted() {
  console.log(this.message);
}

这种模式使得每个组件之间的联系更加直观易懂，同时也便于追踪数据流动路径[^2]。