Vue 创建组件

第一种

<div id="app">
    <mycom1></mycom1>
</div>
    
<script>
    Vue.component('mycom1', Vue.extend({
        template: '<h3>使用Vue.extend创建的组件</h3>'
    }))
    var vm = new Vue({
        el: '#app',
        data: {}
    })
</script>

第二种

<div id="app">
    <mycom2></mycom2>
</div>
    
<script>
    Vue.component('mycom2', {
        template: '<h3>使用Vue.extend创建的组件</h3>'
        // 要注意：组件的template属性指向的模板内容，必须有且只能有唯一的一个根元素
        //例如： template: '<div><h3>使用Vue.extend创建的组件</h3><span>123</span></div>'
    })
    var vm = new Vue({
        el: '#app',
        data: {}
    })
</script>

第三种

<div id="app">
    <mycom3></mycom3>
</div>
<!-- 在被控制的 #app 外面使用 template元素定义组件的HTML模板 -->
<template id="#tmpl">
    <div>
        <h3>通过template元素在外部定义组件结构</h3>
    </div>
</template>
<script>
    Vue.component('mycom3',{
        template: '#tmpl'
    })
    var vm = new Vue({
        el: '#app',
        data: {}
    })
</script>

第四种

// 通过对象字面量的形式，定义了一个组件模板对象
       var login = {
           template: '<h1>登录组件</h1>'
       }
       // 通过  Vue.component  把组件模板对象注册为一个全局的Vue 组件，同时，为这个组件起了一个名称，可以让我们通过标签的形式在页面中直接引入这个组件
       Vue.component('mylogin', login)

   <div id="app">
       <mylogin></mylogin>
   </div>

以上创建的组件均为全局组件，私有组件可通过以下方式创建

<div id="app">
    <login></login>       //私有组件只能在vm所控制区域内使用
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        components: {
            login: {
                template: '<h1>私有组件创建</h1>'
            }
        }
    })
</script>

<div id="app">
    <login></login>       //私有组件只能在vm所控制区域内使用
</div>
<!-- 同样可以在被控制的 #app 外面使用 template元素定义组件的HTML模板 -->
<template id="#tmpl_2">
    <div>
        <h1>私有组件创建</h1>
    </div>
</template>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        components: {
            login: {
                template: '#tmpl_2'
            }
        }
    })
</script>