vuejs全局组件创建的方式
vue组件分为全局组件和私有组件，我们先看看全局组件的创建方式。
第一种方式：
vue创建组件用component方法创建。
1、首先创建一个组件的模版。
var com1 = Vue.extend({
template: '<h1>Hello World</h1>'
})2、注册组件。示例代码里的第一个函数为要创建的组件名称，第二个为组件的模版。
Vue.component('mycom1',com1 )这样就成功的创建了组件，上面两步可以合并为如下代码
Vue.component('mycom1', Vue.extend({
template: '<h1>Hello World</h1>'
}))3、然后在模版里显示组件，直接用组件的名称作为标签即可显示。
<mycom1></mycom1>
第二种方式：
直接用对象的形式创建。
Vue.component('mycom2', {
template: '<h1>组件的第二种创建方式</h1>'
})这样组件就创建成功了，显示方法一样
<mycom2></mycom2>
上面两种完整代码如下
<div id="main" v-cloak>
<mycom1></mycom1>
<mycom2></mycom2>
<mycom3></mycom3>
</div>
<template id="temp">
<div>
<h1>组件第三种形式</h1>
<h2>hello</h2>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//组件的第一种创建方式
var com1 = Vue.extend({
template: '<h1>Hello World</h1>'
})
Vue.component('mycom1',com1 )
//组件的第一种创建方式的简写
Vue.component('mycom1', Vue.extend({
template: '<h1>Hello World</h1>'
}))
//组件的第二种创建方式
Vue.component('mycom2', {
template: '<h1>组件的第二种创建方式</h1>'
})
var vm = new Vue({
el: '#main',
})
</script>以上两种方式都有一个缺点，就是如果模版里有很多内容代码就没有办法写了，所以这就有了第三种创建方式。
第三种方式：
用#号来给模版赋一个值
<script>
//组件的第二种创建方式
Vue.component('mycom3', {
template: '#temp'
})
</script>然后在div标签和script标签的中间写模版，模版id就是上一步创建组件时赋的值
<template id="temp"> <div> <h1>组件第三种形式</h1> <h2>hello</h2> </div> </template>
然后在div标签中显示即可
<mycom3></mycom3>
完整代码如下
<div id="main" v-cloak>
<mycom3></mycom3>
</div>
<template id="temp">
<div>
<h1>组件第三种形式</h1>
<h2>hello</h2>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// var com1 = Vue.extend({
// template: '<h1>Hello World</h1>'
// })
//组件的第三种创建方式
Vue.component('mycom3', {
template: '#temp'
})
var vm = new Vue({
el: '#main',
})
</script>一般代码量大的情况只能使用第三种方式创建组件。
相关文章：