Vue2 子组件的数据与方法访问

Vue2 子组件的数据与方法访问

Vue.js 是一款流行的前端框架，它提供了一种组件化的开发方式，使得代码的结构更加清晰和可维护。在 Vue 的组件中，有时候我们需要在子组件中访问父组件的数据或者调用父组件的方法。本文将介绍几种方法来实现子组件与父组件之间的数据和方法的访问。

一、Props 属性传递

在 Vue 中，可以通过在父组件上使用 props 来传递数据给子组件。子组件可以通过 props 选项定义接收的属性，并且可以在组件内部直接使用。

父组件示例：

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent!'
    };
  }
};
</script>

子组件示例：