常用的几种 Vue 父子组件传值方式

置顶

搬砖牛马人

已于 2025-04-20 12:54:12 修改

阅读量747

点赞数 29

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

于 2025-04-20 11:23:01 首次发布

本文链接：https://blog.csdn.net/weixin_45737215/article/details/147362914

1. 父组件向子组件传值（props）

父组件代码：Parent.vue

<template>
  <div>
    <h2>父组件</h2>
    <Child :parent-msg="parentMsg" />
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  },
  data() {
    return {
      parentMsg: '这是父组件传递的消息'
    };
  }
};
</script>

子组件代码：Child.vue

<template>
  <div>
    <h3>子组件</h3>
    <p>从父组件接收到的消息：{
    
    { parentMsg }}</p>
  </div>
</template>

<script>
export default {
  props: {
    parentMsg: {
      type: String,
      required: true
    }
  }
};
</script>

2. 子组件向父组件传值（this.$emit）

子组件代码：Child.vue

<template>
  <div>
    <h3>子组件</h3>
    <button @click="sendMessage">向父组件发送消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childMsg: '这是子组件的消息'
    };
  },
  methods: {
    sendMessage() {
      this.$emit('sendMessage', this.childMsg);
    }
  }
};
</