08.VUE全局组件和私有组件

---

1.创建全局组件

<div id="app" style="border: 1px solid red; margin-bottom: 20px" >
    <huaxia></huaxia>
    <zwj></zwj>
    <b>-----------</b>
    <my-test></my-test>
    <myTest></myTest>
    <my--test></my--test>
    <b>-----------</b>
    <test2></test2>
    <login></login>
</div>

1.创建全局组件

	let hx = Vue.extend({
        template:'<h3>老王</h3>'
    });
    /*挂载模板到组件上*/
    Vue.component('huaxia',hx);

2.简写

	/*简写*/
    Vue.component('zwj',Vue.extend({
        template: '<h4>张无忌</h4>'
    }));

3.注意：标签名大小写

HTML中规定标签名不区分大小写，推荐标签名端部小写，如果标签名多个单词组成，中间用减号

    Vue.component('myTest',Vue.extend({
        template:'<b>驼峰命名法1</b>'
    }))
    Vue.component('my-test',Vue.extend({
        template:'<b>驼峰命名法2</b>'
    }));

重点:
    1.如果模板输出的内容为多个标签组成，则这多个标签一定要有一个父级签
    2.自定义组件的template属性指向的模板内容，必须只能有一个根元素（只能返回一个标签，但是该标签内可以存在多个标签)

Vue.component('test2',Vue.extend({
        template:'<div><p>p1</p><p>p2</p></div>'
    }));

2.创建私有组件

<div id="app2">
    <login></login>
</div>

 let vm2 = new Vue({
        el: "#app2",
        data: {},
        methods: {},
        components:{
          login:{
              template:"<h1>我是私有组件</h1>"
          }
        },
    });