provide/inject

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

provide 向子孙组件提供父组件的方法或属性。provide 是一个对象或返回一个对象的函数，该对象包含了可注入其子孙的 property。
inject 是一个字符串数组或一个对象

使用方式

祖先组件里提供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>

注意：通过 provide/inject 注入的属性在子孙组件中是无法 watch

$props

在父组件中通过 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>

$parent

在子组件中通过 this.$parent.event 的方式来调用父组件的方法。在嵌套层级很深的子组件中不建议使用该方式。

父组件

// Parent.vue
<template>
  <div class="container">
    <h3>$parent 获取父组件方法</h3>
    <div class="description">
      在子组件中通过 Vue 实例的 $parent 方法获取父组件的方法
    </div>
    <br />
    <Child></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",

  methods: {
    childMethod() {
      console.log(
        "我是子组件的方法，我在子组件中通过 $parent 调用了父组件的方法"
      );
      this.$parent.fatherMethodHandle();
    },
  },
};
</script>

<style scoped>
</style>

$emit

在子组件中使用 $emit 向父组件触发一个事件，然后在父组件中监听该事件。在嵌套层级很深的子组件中不建议使用该方式。

父组件

// Parent.vue

<template>
  <div class="container">
    <h3>$emit 触发事件</h3>
    <div class="description">
      在子组件里通过 $emit 向父组件触发一个事件，然后父组件监听该事件
    </div>
    <br />
    <Child @call-father="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",

  methods: {
    childMethod() {
      console.log(
        "我是子组件的方法，我在子组件中通过 $emit 向父组件触发了事件"
      );
      this.$emit("call-father");
    },
  },
};
</script>

<style scoped>
</style>