Vue父子组件传参

最新推荐文章于 2025-03-18 20:02:11 发布

.明天的自己

最新推荐文章于 2025-03-18 20:02:11 发布

阅读量250

点赞数

分类专栏：父子组件传值文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_44870612/article/details/111407293

版权

父子组件传值专栏收录该内容

1 篇文章

订阅专栏

本文主要展示了Vue中父子组件如何进行数据传递。通过子组件声明props接收父组件数据，并利用$emit触发事件来实现通信。详细代码示例见正文。

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

逻辑跟代码的示例解释说明我大都写在了代码备注上，这里就不过多的文字性说明了，直接上代码！

Fu.vue:

<template>
  <div>
      <p>
          <b>子组件</b>
          <!-- 前面的data是子组件里接收数据的变量名，后面data_fu是父组件里数据的变量名 -->
          <Zi :data="data_fu" @pro_fu="get_info"></Zi>   <!-- :data="data_fu"  展示从父组件传到子组件的参数（数据）-->
          <!-- <Zi :data='data_fu' @fu_data="get_info"></Zi>  把子组件的内容全部放到父组件来展示-->
      </p>

      <br><br>

      <p>
          <b>父组件</b>
          <br>

          <button @click="fu_data">传递参数给子组件</button>

          <br>
          {{data_2}}  <!-- 展示子组件定义的内容 -->
      </p>
  </div>
</template>

<script>
import Zi from "./Zi"       // 导入子组件
export default {
    data() {
        return {
            data_fu:"父组件里定义的内容",
            data_2:"子组件里定义的内容",
        }
    },

    components: {
        Zi,     // 注册子组件
    },

    methods:{
        fu_data(){
            this.data_fu = "父组件改变值"
        },

        get_info(val){
            console.log(val)
            this.data_2 = val
        }
    }
}
</script>

<style>

</style>

Zi.vue

1、在子组件中，使用选项 props 来声明需要从父级接收到的数据

2、在子组件中，通过$emit()来触发事件

<template>
  <div>
      <p>
          <ul>
              <li>这里是子组件！！！<button @click="zi_data">传递参数给父组件</button></li>
          </ul>
      </p>
      {{data}}    <!-- 展示父组件传过来的数据 -->
  </div>
</template>

<script>
export default {
    props: ['data'],     // 接收父组件传过来的数据
    data() {
        return {
            data_1: '子组件改变值'
        }
    },

    methods:{
        zi_data(){
            this.$emit('pro_fu', this.data_1)  // 将子组件的内容赋值给pro_fu，传递到父组件
        }
    }
}
</script>

<style>

</style>

下面是运行后的效果：

未点击前：

在这里插入图片描述