Vue组件的几种声明方式：Vue.extend、语法糖、script的type=“text/x-template“、template标签

本文主要是介绍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标签的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---