vue.js 中定义组件有三种方法:直接定义在
如何在 Vue.js 中定义组件
一、直接定义
-
在
标签中,使用
export default {}
导出组件对象:<code class="html"><script> export default { // 组件内容 } </script>
-
在
标签中,定义组件布局:
<code class="html"><template><div>组件内容</div> </template>
二、使用组件工厂函数
-
创建一个工厂函数,并使用
defineComponent
辅助函数:<code class="javascript">import { defineComponent } from 'vue' export default defineComponent({ // 组件内容 })
- 组件布局与上述直接定义方式相同。
三、使用类定义组件
-
继承
Vue.extend
创建一个类:<code class="javascript">import Vue from 'vue' export default class MyComponent extends Vue { // 组件内容 }
-
注册组件:
<code class="javascript">// 在 Vue 实例中 this.$options.components.MyComponent = MyComponent