vue.js 中定义组件有三种方法：直接定义在 <script> 标签中并导出组件对象、使用组件工厂函数和 definecomponent 辅助函数创建、使用类定义组件并继承 vue.extend 创建。</script>
如何在 Vue.js 中定义组件
一、直接定义
-
在
<script></script>标签中，使用export default {}导出组件对象：<code class="html"><script> export default { // 组件内容 } </script></code> -
在
<template></template>标签中，定义组件布局：<code class="html"><template><div>组件内容</div> </template></code>
二、使用组件工厂函数
-
创建一个工厂函数，并使用
defineComponent辅助函数：<code class="javascript">import { defineComponent } from 'vue' export default defineComponent({ // 组件内容 })</code> - 组件布局与上述直接定义方式相同。
三、使用类定义组件
-
继承
Vue.extend创建一个类：<code class="javascript">import Vue from 'vue' export default class MyComponent extends Vue { // 组件内容 }</code> -
注册组件：
<code class="javascript">// 在 Vue 实例中 this.$options.components.MyComponent = MyComponent</code>
以上就是vue.js怎么定义一个组件的详细内容，更多请关注北冥有鱼其它相关技术文章！
