父组件向子组件传值-props属性名类型

本文探讨了在Vue中,父组件如何通过props向子组件传递值,强调了props属性名在定义时应遵循的驼峰式与短横线形式的规则。同时,内容还涉及到props属性值类型的绑定差异,指出在字符串模板中不强制要求格式,并且当props为数字时,加冒号表示number类型,可用于数值计算,而不加冒号则被视为string类型。

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

父组件向子组件传值时props属性名规则:

  1. 在props中使用驼峰形式,模板中需要使用短横线得形式
  2. 字符串形式得模板中没有这个限制
<body>
  <div id="app">
    <div>{{pmsg}}</div>
    <menu-item :menu-title='ptitle'></menu-item>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      父组件向子组件传值-props属性名规则
    */
    Vue.component('third-com', {
      props: ['testTile'],
      template: '<div>{{testTile}}</div>'
    });
    Vue.component('menu-item', {
      props: ['menuTitle'],
      template: '<div>{{menuTitle}}<third-com testTile="hello"></third-com></div>'
    });
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父组件中内容',
        ptitle: '动态绑定属性'
      }
    });
  </script>
</body>

结果:
在这里插入图片描述

props属性值类型绑定有什么区别:

 <body>
     <div id="app">
         <div>{{psmg}}</div>
        <menu-item :pstr='pstr' pnum='12' pboo='true'></menu-item>
     </div>
     <script type="text/javascript" src="js/vue.js"></script>
     <script type="text/javascript">
         //组件注册
         Vue.component('menu-item',{
            props:['pstr','pnum','pboo'],
             template:`
             <div>
                <div>{{pstr}}</div>
                <div>{{pnum}}</div>
             </div>
             `
         });
         var vm = new Vue({
             el:'#app',
             data:{
                 psmg:'父组件得内容',
                 pstr:'hello'
             }
         });
     </script>
 </body>

结果:
在这里插入图片描述
注:

  1. 子组件是字符串模板时,template使用得是倒引号
  2. 子组件中props属性如果是数字,加冒号时属性为number类型可以进行数值计算,而不加冒号时则是string类型
### Vue 父组件子组件 Table Props 数据教程 在 Vue 中,父组件可以通过 `props` 向子组件递数据。具体实现方式如下: #### 父组件模板部分 通过自定义标签 `<DailySummaryTable>` 来引入子组件,并利用冒号前缀 (`:`) 绑定属性来递数据给子组件。 ```html <template> <!-- 父组件中绑定数据 --> <DailySummaryTable @update-data="handleUpdateData" :tableDataForDays='tableDataForDays' :commentData='CommentData'> </DailySummaryTable> </template> ``` 这里使用了两个 prop 属性:`:tableDataForDays` 和 `:commentData`,分别对应于父级中的 `tableDataForDays` 变量以及 `CommentData` 变量[^1]。 #### 子组件选项配置 子组件需提前声明它所接收的 props 参数及其类型,默认情况下如果没有提供相应的会采用设定好的默认。 ```javascript export default { name: 'DailySummaryTable', props: { tableDataForDays: { type: Array, default() { return []; } }, commentData: String // 这里假设评论数据是一个字符串类型 } } ``` 为了确保子组件能够接收到最新的父组件状态变化后的最新版本的数据,可以考虑设置 watcher 或者 computed 计算属性来进行深层次的对象/数组监控并作出响应处理[^5]。 对于一些复杂场景下可能还需要让子组件调用父组件的方法完成特定逻辑操作,这时就可以借助事件机制或者直接作为 prop 下发 function 类型的方法供子组件调用了[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值