Vue学习之组件（二）

components 组件props属性设置

1、简单使用

<div class="app">
    <cat name='tail'></cat>
</div>

new Vue({
      el:'.app',
      data:{},
      components:{
        'cat': {
          template: `<p>我家有个小猫，它的名字叫 {{name}}</p>`,
          props: ['name']
        }
      }
    })

注意，如果components属性，为驼峰式 caiName,为它传值的时候要写成 cat-name， 如下：

<div class="app">
    <cat cat-name='tail'></cat>
  </div>

 new Vue({
      el:'.app',
      data:{},
      components:{
        'cat': {
          template: `<p>我家有个小猫，它的名字叫 {{catName}}</p>`,
          props: ['catName']
        }
      }
    })

2、给components的属性绑定data数据

<div class="app">
    <cat :cat-name='message'></cat>
  </div>

new Vue({
      el:'.app',
      data:{
        message:'tail.....'
      },
      components:{
        'cat': {
          template: `<p>我家有个小猫，它的名字叫 {{catName}}</p>`,
          props: ['catName']
        }
      }
    })