Vue学习之组件（二）

components 组件props属性设置

1、简单使用

    


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

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

    
  

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

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

    
  

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