父子组件之间的传参

最新推荐文章于 2025-05-13 13:47:36 发布

原创最新推荐文章于 2025-05-13 13:47:36 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了Vue.js中父子组件之间的通信方式。首先展示了如何通过属性绑定（props）实现父组件向子组件传递数据，然后讲解了子组件如何通过事件（$emit）将信息传递回父组件。实例代码详细展示了这两个过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.父组件

<div>父组件</div>

2.子组件

<div>子组件</div>

3.父组件给子组件传参

------------------父组件
<template>
<!-- 通过:msgA=""给子组件传值 -->
  <div :msgA="msg">父组件</div>
</template>
<script>
export default {
  data() {
    msg: "hello world";//给子组件传的值
  },
};
</script>



-------------------子组件
<template>
<!-- 通过props接受值后可直接使用 -->
  <div>子组件{{msgA}}</div>
</template>
<script>
export default {
    // 子组件通过props接收父组件传来的值
  props: {
      //父组件传来的值需定义一下
    msgA: {
      type: String, //类型
    },
  },
  data() {},
};
</script>

4.子组件给父组件传值

------------------------子组件
<template>
  <div>子组件</div>
</template>
<script>
export default {
  data() {
    msg: "将要传给父组件的值";
  },
  created() {
    this.toFather();
  },
  methods: {
    toFather() {
      //   子组件通过$emit将data中的msg传递给父组件中的msgB事件
      this.$emit("msgB", this.msg);
    },
  },
};
</script>
-------------------------父组件
<template>
  <!-- 父组件通过子组件定义好的msgB触发父组件中的msgA获取传来的值 -->
  <div @msgB="msgA">父组件</div>
</template>
<script>
export default {
  data() {
    msg: "";
  },
  methods: {
    msgA(data) {
      this.msg = data; //这是子组件给父组件传来的值
    },
  },
};
</script>