vue 子组件里面的子组件 直接调用父组件的方法

在Vue.js中，如果子组件需要直接访问并调用其父组件的方法，通常通过`props`、事件系统（`$emit`）或者自定义的Vuex store来进行通信。由于JavaScript的单向数据流原则，子组件默认是不允许直接操作父组件的属性的。

1. **通过事件（Event Emits）**：子组件可以使用`v-on:custom-event`绑定到一个自定义事件，当触发这个事件时，会将参数传给父组件，并附带一个`$emit`函数，允许它调用父组件的方法，如：

<template>
  <button @click="callParentMethod">触发父方法</button>
</template>

<script>
export default {
  methods: {
    callParentMethod() {
      this.$emit('parentMethod', '参数');
    }
  }
}
</script>

然后在父组件中接收和处理这个事件：

<template>
  <div>
    <child-component @parentMethod="handleParentMethod"></child-component>
  </div>
</template>

<script>
methods: {
  handleParentMethod(args) {
    console.log('父组件接收到的参数:', args);
  }
}
</script>

2. **通过Props**：如果需要频繁交互，也可以通过 Props 从父组件传递方法名作为字符串，然后在子组件内部调用：

// 父组件
<template>
  <child-component :parentMethod="myMethodToCall" />
</template>
<script>
export default {
  methods: {
    myMethodToCall(arg) {
      // ...
    }
  }
}
</script>

// 子组件
<template>
  <button @click="invokeParentMethod">调用父方法</button>
</template>
<script>
export default {
  props: ['parentMethod'],
  methods: {
    invokeParentMethod() {
      this[parentMethod]('参数');
    }
  }
}
</script>