VUE3 学习笔记（8）：VUE 组件间传值【父传子、子传父】

最新推荐文章于 2025-05-21 13:56:18 发布

众纳

最新推荐文章于 2025-05-21 13:56:18 发布

阅读量624

点赞数 16

CC 4.0 BY-SA版权

分类专栏： WEB 前端文章标签： vue.js VUE组件传值 vue 子父传值 vue 父子传值 VUE 子组件传父组件 VUE 父组件传子组件 vue

本文链接：https://blog.csdn.net/weixin_44690195/article/details/139283601

父传子值

可以在父组件使用中增加：命名，子组件中通过props:["命名"] 接收的方式进行处理。

支持多种类型，当然也支持传对象、函数、HTML内容（后面讲的插槽），也可以通过provide进行跨级透传

props逐级传参示例

示例

父组件（容器） app.vue

<!--内容控制-->
<template>
  传值
  <test :num="100" :names="names" :msg="msg"/>
</template>
<!--JS 控制-->
<script>

import test from "@/components/test.vue";


export default {
  components: {test},
  data() {
    return {
      msg: '测试一下',
      names:["张三","李四","王五"],
      user:{
        name:'张三',
        age:18
      }

    }
  }

}

</script>

子组件 test.vue

<template>
  <p>接收到： {
  
  {msg}}</p>
  <p>{
  
  {num}}</p>
  <p v-for="(item,index) in names" :key="index">{
  
  {item}}</p>
</template>

<script >
  export default {
    props:["msg","num","names"]
  }
</script>