【VUE实战问题记录】Vue 子组件调用父组件的使用方法 provide/inject 使用

编写项目的时候，要对代码进行抽离，封装成一个单独的组件，这个时候数据的传输，方法的调用就成了一个很大的问题，那么我们来实现如何在父组件中调用子组件。

第1种方法：provide/inject

在某些场景下，我们的组件嵌套层级会非常深，这个时候如果使用 props 的方式传递祖先组件的方法或属性，并不是一个明智的选择，我们应该使用 provide/inject 来跨层级访问祖先组件的数据

父组件

// Parent.vue
<template>
  <div class="container">
    <h3>provide/inject 传递方法</h3>
    <div class="description">
      在父组件中通过 provide 向子孙组件提供方法，在子孙组件中通过 inject
      获取父组件提供的方法
    </div>
    <br />
    <Child></Child>
  </div>
</template>
<script>
import Child from "./Children";
export default {
  name: "Father",
  components: {
    Child,
  },
  provide() {
    return {
      fatherMethod: this.fatherMethodHandle,
    };
  },
  methods: {
    fatherMethodHandle() {
      console.log("我是父组件的方法");
    },
  },
};
</script>

<style scoped lang="scss">
</style>

子组件

<template>
  <div>
    <button @click="childMethod">我是子组件</button>
  </div>
</template>
<script>
export default {
  name: "Child",
  props: {
    msg: String,
  },
  inject: ["fatherMethod"],
  methods: {
    childMethod() {
      console.log("我是子组件的方法，我在子组件中调用了父组件的方法");
      this.fatherMethod();
    },
  },
};
</script>
<style scoped>
</style>

第2种方法：

在父组件中通过 props 的方式传入子组件中，在子组件中直接调用这个方法。在嵌套层级很深的子组件中不建议使用 props 的方式传递父组件的方法，因为层层传递会导致代码变得难以维护

父组件

// Parent.vue

<template>
  <div class="container">
    <h3>props 方式传递方法</h3>
    <div class="description">
      在父组件中通过 props 的方式 向子孙组件传递方法
    </div>
    <br />
    <Child :fatherMethod="fatherMethodHandle"></Child>
  </div>
</template>

<script>
import Child from "./Child";

export default {
  name: "Father",
  components: {
    Child,
  },
  methods: {
    fatherMethodHandle() {
      console.log("我是父组件的方法");
    },
  },
};
</script>
<style scoped lang="scss">
</style>

子组件

// Child.vue
<template>
  <div>
    <button @click="childMethod">我是子组件</button>
  </div>
</template>

<script>
export default {
  name: "Child",
  props: {
    fatherMethod: {
      type: Function,
      require: true,
      default: null,
    },
  },
  methods: {
    childMethod() {
      console.log(
        "我是子组件的方法，我在子组件中通过 props 的方式调用了父组件的方法"
      );
      this.fatherMethod();
    },
  },
};
</script>
<style scoped>
</style>

第3种方法：

父组件

<template>
  <div>
    <child></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

子组件

<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      }
    }
  };
</script>

第4种方法

父组件

<template>
  <div>
    <child @fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

子组件

<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$emit('fatherMethod');
      }
    }
  };
</script>

第5种方法

父组件

<template>
  <div>
    <child :fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

子组件

<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
        if (this.fatherMethod) {
          this.fatherMethod();
        }
      }
    }
  };
</script>

参考
文章1
文章2