Vue.js局部注册组件如何直接调用父组件方法？

嘿，针对你的需求，确实有几种方式可以不用在HTML模板里绑定自定义事件，就能让局部注册的子组件调用父组件的exampleMethod方法，我给你详细拆解一下：

方法1：通过this.$parent直接访问父组件实例（最直接，无需修改HTML） #

Vue的子组件实例自带$parent属性，能直接获取到父组件的实例，这样就能直接调用父组件的方法了。这种方式完全不需要修改你的HTML代码，只需要调整子组件的方法逻辑即可。

修改后的子组件代码 #

'my-component': {
  methods: {
    callMethod() {
      // 直接通过$parent调用父组件的exampleMethod
      this.$parent.exampleMethod('子组件传递的数据');
    }
  },
  template: `
    <div>
      <!-- 注意：这里要把:change改成@change，不然不会触发事件 -->
      <input type="checkbox" @change="callMethod()">
    </div>`
}

注意事项

• 这种方式仅适用于直接父子组件的场景，如果组件嵌套层级更深，$parent指向的就不是根Vue实例了；
• 组件耦合度会变高，后期如果父组件方法名改动，子组件也得跟着改，维护成本略高；
• 你代码里有个小错误：methods中的exampleMethos拼写少了一个d，要改成exampleMethod，不然调用会报错。

方法2：通过props传递方法（更符合Vue设计理念） #

如果不想用耦合度高的$parent，可以在局部注册子组件时，把父组件的方法作为props传递过去。这种方式组件依赖关系更清晰，更易维护。

方式A：允许修改HTML模板 #

如果可以给子组件标签加props属性，代码调整如下：

1. 子组件定义接收方法的props

'my-component': {
  props: {
    parentCall: {
      type: Function,
      required: true
    }
  },
  methods: {
    callMethod() {
      this.parentCall('子组件传递的数据');
    }
  },
  template: `
    <div>
      <input type="checkbox" @change="callMethod()">
    </div>`
}

2. HTML模板传递方法

<div id="my-id">
  <my-component :parent-call="exampleMethod"></my-component>
  <my-component :parent-call="exampleMethod"></my-component>
  <!-- 其他子组件同理 -->
</div>

方式B：不修改HTML模板（适配你的需求） #

如果完全不想改动HTML，可以在根Vue实例的生命周期钩子中，手动给子组件赋值方法：

var app = new Vue({
  el: '#my-id',
  data() {
    return {
      example: 1
    }
  },
  methods: {
    exampleMethod(data) {
      console.log('data', data);
    }
  },
  components: {
    'my-component': {
      methods: {
        callMethod() {
          this.parentCall('子组件传递的数据');
        }
      },
      template: `
        <div>
          <input type="checkbox" @change="callMethod()">
        </div>`
    }
  },
  created() {
    // 等待DOM渲染完成后，给所有子组件赋值方法
    this.$nextTick(() => {
      this.$children.forEach(child => {
        child.parentCall = this.exampleMethod;
      });
    });
  }
});

这种方式要注意子组件的渲染时机，如果是动态创建的子组件，还需要额外监听处理。

内容的提问来源于stack exchange，提问作者hong4rc