VueJS - 父子组件传值__前端__Vue.js

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

文档在不断更新中，用于记录工作中常用的父子组件传值方法，如果小伙伴们有其他方法，请评论告知，共同进步，🙏🙏

一、父组件向子组件传值

1.通过 v-bind:xxx 进行传递

<!-- 父组件 -->
<div id="app">
    父组件向子组件传值，
    <child :msg="msg1" />
    
    <child v-bind:msg="msg2" />
</div>

<script>
export default {
  data() {
    return {
      msg1: '我是子组件1',
      msg2: '我是子组件2',
    };
  },
};
</script>

2.在子组件，通过 this.$parent 获取父组件this对象

<!-- 子组件 -->
<div>
    <div>子组件：{{ msg }}</div>
</div>

<script>
export default {
  data() {
    return {
      msg: this.$parent.msg1,
    };
  },
};
</script>

3.在父组件使用 provide 和 inject

provide 和 inject 配套使用，参数说明如下：

provide: Object | () => Object

inject: Array<String> | {[key: String]: String | Symbol | Object}

// 父组件
export default {
  components: {
    child,
  },
  provide() {
    return {
      message: this.msg1,
    };
  },
  // 或
  // provide: {
  //   message: '我是子组件',
  // },
  data() {
    return {
      msg1: "我是子组件",
    };
  },
};

<!-- 子组件 -->
<template>
    <div>子组件：{{ message }}</div>
</template>

<script>
export default {
  // 数组
  inject: ["message"],

  // 对象
  // inject: {
  //   txt: "message",
  // },

  // 设置默认值
  // inject: {
  //   message: { default: "default value" },
  // },

  // 默认值-函数
  // inject: {
  //   message: {
  //     default: () => {
  //       return [1, 2, 3];
  //     },
  //   },
  // },

  // 完整带默认值
  // inject: {
  //   txt: {
  //     from: "message", // provide中指向的key
  //     default: "default value",
  //   },
  // },
};
</script>

二、子组件向父组件传值

1.子组件通过 $emit 传值

<!-- 父组件 -->
<template>
  <div id="app">
    <child @change="change" />
  </div>
</template>

<script>
export default {
  // ...
  methods: {
    change(val) {
      console.log(val); // 我是子组件向父组件传值
    },
  },
};
</script>

<!-- 子组件 -->
<template>
  <div></div>
</template>

<script>
export default {
  created() {
    this.$emit("change", "我是子组件向父组件传值");
  },
};
</script>

2.在父组件通过 $refs 获取子组件dom对象

<!-- 父组件 -->
<template>
  <div id="app">
    <child ref="child" />
  </div>
</template>

<script>
export default {
  // ...
  created() {
    this.$nextTick(() => {
      // 通过 $refs 获取子组件dom对象必须在dom渲染完成之后，或在 mounted 调用
      console.log(this.$refs.child.msg); // 我是子组件
    });
  }
};
</script>


<!-- 子组件 -->
<template>
  <div></div>
</template>

<script>
export default {
  data() {
    return {
      msg: '我是子组件'
    }
  }
};
</script>