父组件向子组件传值-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类型
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值