1.vue.extend 创建全局的vue组件
const example = Vue.extend({
template:'<h1>这是使用 Vue.extend创建组件</h1>'
});
Vue.component("myCom1",example );
Vue.component("myCom1",Vue.extend({
template:'<h1>这是使用 Vue.extend创建组件</h1>'
})
)
第一种方式展示的组件
<my-com1></my-com1>
2.vue.component 创建全局的vue组件
Vue.component("myCom2",{
template:'<div><h1>这是使用 Vue.conponent创建组件</h1><span>你好</span></div>'
})
<my-com2></my-com2>
3.vue.component 创建组件,外部定义template
<template id='example'>
<div>
<h1>
{{msg}}
</h1>
</div>
</template>
<script>
Vue.component('com3',{
template:'#example',
data:function() {
return {msg:'这是第三种方式创建组件,并且该方式有代码快捷键的提示'}
}
})
</script>
<my-com3></my-com3>