Vuejs 组件――props数据传递的实例代码

示例代码：

<p id="app"> 
  <add btn="h"></add> 
</p> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    data: { 
      h: "hello" 
    }, 
    components: { 
      "add": { 
        props: ['btn'], 
        template: "<button>btn：{{btn}}</button>", 
        data: function () { 
          return {btn: "123"}; 
        } 
      } 
    } 
  }); 
</script> 

这种写法下，btn的值是h，而不是123，或者是hello。

【4】驼峰写法

假如插值是驼峰式的，而在html标签中，由于html的特性是不区分大小写（比如LI和li是一样的），因此，html标签中要传递的值要写成短横线式的（如btn-test），以区分大小写。

而在props的数组中，应该和插值保持一致，写成驼峰式的（如btnTest）。

例如：

props: ['btnTest'], 
template: "<button>btn：{{btnTest}}</button>", 

正确的写法：

<add btn-test="h"></add> 

假如插值写短横线式，或者是html标签写成驼峰式，都不能正常生效。（除非插值不写成驼峰式――跳过大小写的限制，才可以）

③利用props绑定动态数据：

无相关信息