组件的组合

• 一个组件可以包含多个组件

• 每个组件都是独立的, 设计上是相互不可见的, 需要代理通信

局部组件

• 局部组件定义方式

  • 局部组件有自己的template, data和methods
  • child1和child2是同级组件
  • child1组件不能直接访问child2的属性,反之亦然

  //注册父组件 my-component
  Vue.component('my-component',{
      template:'<div>父组件的html结构</div>', 
      components:{    // 这里定义子组件
        'child1':{
            template:'#c1',
            data: function(){},
            methods: {}
        }，
       'child2':{
            template:'#c2',
            data: function(){},
            methods: {}
        }
      }
  })
  

• 子组件的调用
  注: 子组件只能在其父组件的模板中进行调用和组合

  <my-component>
      <child1></child1>
      <child2></child2>
  </my-component>
  

基本用法

• 如果定义组件内部的配置较多, 可以赋值给变量

    // 定义子组件
    var child = Vue.conponent({
        template: '<div>这是子组件1</div>'
    });
  
    //定义父组件
    var parent = Vue.conponent({
    template: '<div>这是父组件<child-component></child-component></div>',
    components: {
        //此时子组件child-component只能在父组件中使用
        'child-component': child
    }
    });
  
    //注册父组件
    Vue.component('parent-component', parent);