How to define a component in vue.js

There are three ways to define a component in Vue.js: directly define it in the <script> tag and export the component object, create it using the component factory function and defineComponent auxiliary function, and use a class to define the component and inherit Vue.extend to create it. .

How to define components in Vue.js

1. Direct definition

1. In the <script> tag, use export default {} to export the component object:

   <code class="html"><script>
   export default {
     // 组件内容
   }
   </script></code>

2. In the <template> tag, define the component layout:

   <code class="html"><template>
     <div>组件内容</div>
   </template></code>

2. Use the component factory function

1. Create a factory function and use defineComponent Auxiliary function:

   <code class="javascript">import { defineComponent } from 'vue'
   
   export default defineComponent({
     // 组件内容
   })</code>

2. The component layout is the same as the direct definition above.

3. Use classes to define components

1. InheritanceVue.extend Create a class:

   <code class="javascript">import Vue from 'vue'
   
   export default class MyComponent extends Vue {
     // 组件内容
   }</code>

2. Registered component:

   <code class="javascript">// 在 Vue 实例中
   this.$options.components.MyComponent = MyComponent</code>

The above is the detailed content of How to define a component in vue.js. For more information, please follow other related articles on the PHP Chinese website!