Vue中子组件访问父组件

在 Vue 中，可以通过 props 和自定义事件来实现子组件访问父组件的方法。以下是两种常用的方法：

1. 通过 props 传递方法

在父组件中定义一个方法，将其通过 props 传递给子组件。在子组件中，通过 $emit触发自定义事件，将需要传递给父组件的参数传递给该事件，然后在父组件中监听该事件并调用相应的方法。

父组件代码

<template>
  <div>
    <ChildComponent :update-name="updateName"></ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  methods: {
    updateName(name) {
      // 执行父组件的方法
      console.log(`更新名称为 ${name}`);
    },
  },
};
</script>

子组件代码

<template>
  <div>
    <button @click="updateName">更新名称</button>
  </div>
</template>

<script>
export default {
  props: {
    updateName: {
      type: Function,
      required: true,
    },
  },
  methods: {
    updateName() {
      // 触发自定义事件，并将需要传递给父组件的参数传递给该事件
      this.$emit('update-name', '小明');
    },
  },
};
</script>

2.通过 $parent 和 $refs 访问父组件

在子组件中，可以通过 $parent 属性来访问父组件实例，并调用父组件的方法。也可以通过 $refs 属性来访问父组件中被引用的子组件实例，并调用该子组件方法。

父组件代码

<template>
  <div>
    <ChildComponent ref="child"></ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  methods: {
    updateName(name) {
      // 执行父组件的方法
      console.log(`更新名称为 ${name}`);
    },
  },
};
</script>

子组件代码

<template>
  <div>
    <button @click="updateName">更新名称</button>
  </div>
</template>

<script>
export default {
  methods: {
    updateName() {
      // 访问父组件实例，调用父组件的方法
      this.$parent.updateName('小明');
      
      // 或者访问被引用的子组件实例，调用子组件的方法
      this.$refs.child.updateName('小明');
    },
  },
};
</script>

注意：在使用 $parent 和 $refs 访问父组件或子组件时，需要确保相应的组件实例已经被创建，否则可能会出现 undefined 或 null 的错误。因此，推荐使用第一种方法，即通过 props 和自定义事件来实现子组件访问父组件的方法。