Bagaimana untuk menentukan komponen dalam vue.js

Terdapat tiga cara untuk mentakrifkan komponen dalam Vue.js: mentakrifkannya secara langsung dalam teg dan mengeksport objek komponen, menciptanya menggunakan fungsi kilang komponen dan menentukan fungsi pembantu Komponen, atau gunakan kelas untuk mentakrifkan komponen dan mewarisi Vue.extend untuk menciptanya. . } Eksport objek komponen:

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

Dalam teg <template>, tentukan reka letak komponen:

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

2. Gunakan fungsi kilang komponen

Buat fungsi kilang dan gunakan fungsi pembantu defineComponent:

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

   <script> 标签中，使用 export default {} 导出组件对象：

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

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

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

二、使用组件工厂函数

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

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

三、使用类定义组件

1. 继承 Vue.extendSusun atur komponen adalah sama seperti definisi langsung di atas.

2. 3. Gunakan kelas untuk mentakrifkan komponen

🎜🎜Warisi Vue.extend Cipta kelas: 🎜rrreee🎜🎜🎜Daftar komponen: 🎜🎜rr

Atas ialah kandungan terperinci Bagaimana untuk menentukan komponen dalam vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!