vue2使用Props 传值案例和步骤

最新推荐文章于 2025-07-05 13:44:41 发布

玉面小达摩suki

最新推荐文章于 2025-07-05 13:44:41 发布

阅读量4.1k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： web前端技术 vscode vue props 父组件给子组件传值

本文链接：https://blog.youkuaiyun.com/qq_33964336/article/details/88526687

web前端技术同时被 3 个专栏收录

18 篇文章

订阅专栏

vscode

6 篇文章

订阅专栏

vue

4 篇文章

订阅专栏

本文详细介绍了在Vue2中如何实现父组件向子组件传递数据的过程。具体步骤包括在父组件中声明要传递的值，并在子组件中通过props属性接收这些值。文章还提供了代码示例，展示了如何在子组件中直接使用或通过方法调用获取父组件传递的数据。

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

vue2中父组件给子组件传值可以用props，以下为传值步骤：
1、父组件中声明要传给子组件的值（父组件为minnong.vue,子组件为child.vue）

<child :zsq="sukiTitle"></child>

在这里插入图片描述
2、子组件通过props接收父组件传来的zsq的值

<template>
  <div>
    <h1>我是子组件</h1>
    <p>{{zsq}}-这里可以直接接收父组件的值</p>
    <button @click="showTitle">点击</button>
  </div>
</template>
<script>
export default {
  props: {
    zsq: {
      //此处为要接收的值，zsq为接收过来key
      type: String, //key不能乱写
      default: ""
    }
  },
  methods: {
    showTitle: function() {
      console.log(this.zsq);
      // 点击接收父组件值或者在上面直接接收也行
    }
  }
};
</script>

在这里插入图片描述