亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Before you can register anything globally, you need the component itself. Let's say you're creating a simple reusable BaseButton.vue component:

 <template>
  <button class="base-button">
    {{ label }}
  </button>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      required: true
    }
  }
}
</script>

Put this file in a common directory like components/base/ . Once created, you're ready to register it globally.

In Vue 2: Use Vue.component()

In Vue 2, registering a global component is straightforward. You just call Vue.component() before creating your app instance.

In your main entry file (usually main.js ):

 import Vue from 'vue'
import BaseButton from './components/base/BaseButton.vue'

Vue.component('BaseButton', BaseButton)

new Vue({
  // ...your app options
}).$mount('#app')

Now you can use <BaseButton> anywhere in your app without importing or registering it locally.

Note: Global components are convenient but be careful not to overuse them. If a component is only used in one place, better to keep it local for clarity and performance.

In Vue 3 (Options API): Use app.component()

If you're using Vue 3 with the Options API, the syntax changes slightly because Vue 3 uses an app instance instead of a global constructor.

In main.js or main.ts :

 import { createApp } from 'vue'
import BaseButton from './components/base/BaseButton.vue'
import App from './App.vue'

const app = createApp(App)
app.component('BaseButton', BaseButton)
app.mount('#app')

This registers BaseButton globally and makes it available anywhere inside your Vue app.

You can also split this into a separate file if you have many global components—some people create a globalComponents.js and import all components there before registering them.

In Vue 3 (Composition API <script setup> ): Still Register Globally Like Before

Even if you're using <script setup> , the way to register a global component doesn't change. The difference is mainly in how you write the component itself.

For example, your BaseButton.vue could look like this:

 <template>
  <button class="base-button">
    {{ label }}
  </button>
</template>

<script setup>
defineProps({
  label: {
    type: String,
    required: true
  }
})
</script>

But in main.js , you still register it the same way as above using app.component() .

One thing to note: even though <script setup> simplifies writing components, it doesn't affect how registration works. So global registration stays consistent regardless of how you define the component internally.

So yeah, registering a global component in Vue isn't complicated once you know where to do it and how the syntax differences between Vue 2 and Vue 3. Just make sure to import your component first, then register it at the app level—and avoid making everything global unless it really needs to be.

Basically that's it.

The above is the detailed content of How to register a global component in Vue?. For more information, please follow other related articles on the PHP Chinese website!