父子组件的传参方式

概述

父子组件、子孙组件传递参数和方法的方式有很多,应根据实际情况选择;


provide/inject

provide 向子孙组件提供父组件的方法或属性;

inject 用于接收祖先组件的方法或属性;

注:通过 provide/inject 注入的属性在子孙组件中无法 watch;

注:通过 provide/inject 注入的对象本身发生变化时,不会传递到子组件,但对象中属性的变化可以传递到子组件,即注入的只是引用;

父组件

export default {
  provide() {
    return {
      fatherMethod: this.fatherMethodHandle,
    };
  },
  methods: {
    fatherMethodHandle() {
      console.log("我是父组件的方法");
    },
  },
};

子组件

<script>
export default {
  inject: ["fatherMethod"],
};
</script>


$props

通过 props 向子组件传入数据或方法;当嵌套层级很深时不建议使用此方式,因为层层传递会使代码难以维护;

父组件

<template>
  <div class="container">
    <Child :fatherMethod="fatherMethodHandle"></Child>
  </div>
</template>

子组件

export default {
  name: "Child",
  props: {
    fatherMethod: {
      type: Function,
      require: true,
      default: null,
    },
  },
};
</script>


$parent

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

子组件

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


$emit

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

子组件

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

© 著作权归作者所有


1