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

最新推荐文章于 2023-11-29 09:56:25 发布

原创最新推荐文章于 2023-11-29 09:56:25 发布 · 891 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue

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

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

在props中使用驼峰形式，模板中需要使用短横线得形式
字符串形式得模板中没有这个限制

<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>