本文主要是介绍Vue组件的几种声明方式：Vue.extend、语法糖、script的type=“text/x-template“、template标签，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1、Vue.extend构造器写法
// 构造器 声明
const cpn2 = Vue.extend({template: `<h2>这是一个组件</h2>`
});// vue实例中挂载注册为局部组件
components: {cpn2
}// 全局组件
Vue.component('cpn2', cpn2);// HTML代码中使用
<cpn2></cpn2>
2. 语法糖写法
// vue实例中挂载注册为局部组件
components: {cpn2: {template: `<h2>这是一个组件</h2>`}
}// 全局组件
Vue.component('cpn2', {template: `<h2>这是一个组件</h2>`
});// HTML代码中使用
<cpn2></cpn2>
3. script的type="text/x-template"，组件模板的抽离写法
<script type="text/x-template" id="cpn"><div>这是一个组件</div>
</script>// vue实例中挂载注册为局部组件
components: {cpn: {template: '#cpn'}
}// 全局组件
Vue.component('cpn', {template: '#cpn'
});// HTML代码中使用
<cpn></cpn>
4. template标签，组件模板的抽离写法
<template id="cpn"><h2>这是一个组件</h2>
</template>// vue实例中挂载注册为局部组件
components: {cpn: {template: '#cpn'}
}// 全局组件
Vue.component('cpn', {template: '#cpn'
});// HTML代码中使用
<cpn></cpn>
这篇关于Vue组件的几种声明方式：Vue.extend、语法糖、script的type=“text/x-template“、template标签的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
