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

注册组件

在 Vue 3.0 中，你可以使用 createApp 方法来创建一个应用实例，并使用该实例的 component 方法来注册全局组件。具体步骤如下：

1. 在组件代码文件中，使用 defineComponent 方法来定义组件。

   import { defineComponent } from 'vue';
   
   export default defineComponent({
     // 组件选项，如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>
export default {
  name: 'MyComponent',
  methods: {
    sayHello() {
      this.$myMethod() // This is a global method.
    },
  },
}
</script>

在组件的方法中，我们可以使用 this.$myMethod() 调用全局方法。

总之，Vue 3 中注册全局方法相当简单，只需使用 app.config.globalProperties 即可。