Comment définir un composant dans vue.js

Il existe trois façons de définir un composant dans Vue.js : définissez-le directement dans la balise <script> et exportez l'objet composant, créez-le à l'aide de la fonction d'usine de composants et de la fonction d'assistance DefineComponent, ou utilisez une classe pour définir le composant. composant et héritez de Vue.extend pour le créer.

Comment définir des composants dans Vue.js

1. Définissez directement

1. Dans la balise <script>, utilisez export default { Exporter l'objet composant : <script> 标签中，使用 export default {} 导出组件对象：

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

2. 在 <template> 标签中，定义组件布局：

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

二、使用组件工厂函数

1. 创建一个工厂函数，并使用 defineComponent 辅助函数：

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

2. 组件布局与上述直接定义方式相同。

三、使用类定义组件

1. 继承 Vue.extend

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

2. Dans la balise <template>, définissez la disposition du composant :

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

🎜 2. Utilisez la fonction de fabrique de composants 🎜🎜🎜 🎜🎜 Créez une fonction d'usine et utilisez la fonction d'assistance defineComponent : 🎜rrreee🎜🎜La disposition des composants est la même que la définition directe ci-dessus. 🎜🎜🎜🎜3. Utiliser des classes pour définir des composants 🎜🎜🎜🎜🎜Hériter Vue.extend Créer une classe : 🎜rrreee🎜🎜🎜Enregistrer le composant : 🎜rrreee🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!