【VUE 3.0 全局注册方法与组件】

全局注册

注册组件

在 Vue 3.0 中，你可以使用

createApp

方法来创建一个应用实例，并使用该实例的

component

方法来注册全局组件。具体步骤如下：

1. 在组件代码文件中，使用 defineComponent 方法来定义组件。import{ defineComponent }from'vue';exportdefaultdefineComponent({// 组件选项，如template，props等});
2. 在应用入口文件中（一般为 main.js），通过 createApp 方法创建应用实例。import{ createApp }from'vue';import App from'./App.vue';const app =createApp(App);
3. 在应用实例中使用 component 方法来注册全局组件。import MyComponent from'./MyComponent.vue';app.component('my-component', MyComponent);
4. 在模板中使用注册的组件。<template><div><my-component /></div></template>

这样就可以成功注册并使用全局组件了。

注册方法

在 Vue 3 中，我们可以使用

app.config.globalProperties

来注册全局方法。这个属性允许我们在应用的实例上注册全局方法或属性。

下面是一个例子：

import{ createApp }from'vue'import App from'./App.vue'const app =createApp(App)

app.config.globalProperties.$myMethod=function(){
  console.log('This is a global method.')}

app.mount('#app')

在上面的代码中，我们使用

app.config.globalProperties

来注册了一个名为

$myMethod

的全局方法，然后在应用实例上挂载了我们的根组件

App

。

在我们的应用中的任何组件中，都可以使用

$myMethod

方法，如下所示：

<template><div><button@click="$myMethod()">Click me</button></div></template><script>exportdefault{name:'MyComponent',methods:{sayHello(){this.$myMethod()// This is a global method.},},}</script>

在组件的方法中，我们可以使用

this.$myMethod()

调用全局方法。

总之，Vue 3 中注册全局方法相当简单，只需使用

app.config.globalProperties

即可。