四，组件化开发（二）

1. 全局组件和局部组件

• 当我们通过调用Vue.component()注册组件时，组件的注册是全局的
• 全局组件可以在任意的Vue实例下使用
• 如果我们注册的组件是挂载在某个实例下的，那么它就是一个局部组件

全局组件

 //全局组件  所有的vue实例中都可以使用
    var cpnC= Vue.extend({
        template: '<div>\n' +
            '    <h1>我是标题</h1>\n' +
            '    <p>我是内容</p>\n' +
            '</div>'
    })

    Vue.component('my-cpn',cpnC)

局部组件

var app= new Vue({
            el: "#app",
            data: {
                message: "hello vue"
            },
            components:{
                //cpn 使用组件时的标签名
                cpn: cpnC
            }
        })

2. 父组件和子组件

• 组件树中存在层级关系，非常重要的一项就是父子之间的关系
• 通过代码实现这种关系,在父组件中引用子组件

 // 子组件
    var childComponent = Vue.extend({
        template: '<div>\n' +
            '    <h1>我是标题1</h1>\n' +
            '    <p>我是内容1</p>\n' +
            '</div>'
    })

    //父组件
    var parentComponent = Vue.extend({
        template: '<div>\n' +
            '    <h1>我是标题2</h1>\n' +
            '    <p>我是内容2</p>\n' +
                '<cpn1></cpn1>'+
            '</div>',
        components: {
            child-cpn: childComponent
        }
    })

    //root组件
    var app= new Vue({
            el: "#app",
            data: {
                message: "hello vue"
            },
            components: {
                parent-cpn:parentComponent
            }
        })

3. 注册组件的语法糖

• 按照原本的注册组件的方法，会显得繁琐
• vue简化了这种过程，提供了注册的语法糖格式
• 省去了Vue.extend()这个过程

全局组件的语法糖

 //全局组件的语法糖格式
    Vue.component('cpn1',{
        template:'<div>\n' +
            '    <h1>我是标题</h1>\n' +
            '    <p>我是内容</p>\n' +
            '</div>'
    })

局部组件的语法糖

var app= new Vue({
        el: "#app",
        data: {
            message: "hello vue"
        },
        components:{
            'cpn2':{
                template:'<div>\n' +
                    '    <h1>我是标题</h1>\n' +
                    '    <p>我是内容</p>\n' +
                    '</div>'
            }
        }
    })

4. 组件模板的分离写法

• 我们通过语法糖简化了注册的过程，但是在template模板的地方写起来比较麻烦
• 如果我们可以将template中的HTML分离出来，然后挂载在对应的组件上，结构会更加清晰
• 提供了两种方式
  • ​ 使用Template标签
  • ​ 使用JavaScript标签

全局组件的分离写法

<template id="cpn">
      <div>
          <h2>模板分离</h2>
          <p>我是全局组件的分离写法</p>
      </div>
 </template>

//全局组件的分离写法
    Vue.component('cpn',{
        template:'#cpn'
    })

局部组件的分离写法

<template id="cpn1">
    <div>
        <h2>模板分离</h2>
        <p>我是局部组件的分离写法</p>
    </div>
</template>

  //局部组件的分离写法
    var app= new Vue({
            el: "#app",
            data: {
                message: "hello vue"
            },
            components:{
                'cpn1':{
                    template:'#cpn1'
    }
            }
        })