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. . </script>

How to define components in Vue.js

1. Direct definition

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

   <script>
   export default {
     // 组件内容
   }
   </script>

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

   <template>
     <div>组件内容</div>
   </template>

2. Use the component factory function

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

   import { defineComponent } from 'vue'
   
   export default defineComponent({
     // 组件内容
   })

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

3. Use classes to define components

1. InheritanceVue.extend Create a class:

   import Vue from 'vue'
   
   export default class MyComponent extends Vue {
     // 组件内容
   }

2. Registered component:

   // 在 Vue 实例中
   this.$options.components.MyComponent = MyComponent

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!