Vue父子组件之间的参数传递

最新推荐文章于 2026-04-22 15:46:40 发布

原创

最新推荐文章于 2026-04-22 15:46:40 发布 · 5.2k 阅读

标签

#vue.js

收录于

一组件之间的参数传递——父传子

1 原理说明

通过子组件的 props 部分，来指明可以接收的参数，父组件通过在标签中写明参数的健值对来传递参数。

props 是表示一个组件的参数部分，props 的写法有两种：

a 通过数组来定义

props:['myprop1','myprop2'...]

b 通过对象来定义

props：{
    myName：{
        type:String,
        required:true,
        default:'默认值'
    }
}

2 代码

content.vue

<template>
    <div>
      商品列表...
      {
  
  {myTitle}}
    </div>
</template>
<script>
    export default {
        name: "content",
        /* 当前组件的属性列表 */
        props:['myTitle']
    }
</script>
<style scoped>
</style>

App.vue