vue3 main.js中全局挂载函数

在Vue3中，可以通过createApp方法创建一个Vue实例，并在其上使用全局API来挂载函数。以下是一个示例：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 全局挂载函数
app.config.globalProperties.$myFunction = () => {
  console.log('This is my function')
}

app.mount('#app')

在上面的代码中，我们使用createApp方法创建了一个Vue实例，并在其上使用config.globalProperties来挂载一个名为$myFunction的函数。现在，我们可以在组件中使用该函数：

<template>
  <div>
    <button @click="$myFunction()">Click me</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  methods: {
    myMethod() {
      this.$myFunction()
    }
  }
}
</script>

在上面的代码中，我们在模板中使用了$myFunction函数，并在方法中也可以使用它。这是因为我们已经将其作为全局函数挂载到了Vue实例中。

相关问题

vue3在main.ts里全局挂载了个属性，组件里怎么仔在setup里引用

如果你在 `main.ts` 中全局挂载了一个属性，你可以在组件中使用 `inject` 函数来引用它。首先，在 `main.ts` 中使用 `app.config.globalProperties` 来挂载全局属性，例如：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 在这里挂载全局属性
app.config.globalProperties.$myGlobalProperty = 'some value'

app.mount('#app')

然后在组件的 `setup` 函数中使用 `inject` 函数来引用这个全局属性，例如：

import { defineComponent, inject } from 'vue'

export default defineComponent({
  setup() {
    // 使用 inject 函数来引用全局属性
    const myGlobalProperty = inject('$myGlobalProperty')

    return {
      myGlobalProperty
    }
  }
})

这样，你就可以在组件中访问 `$myGlobalProperty` 这个全局属性了。需要注意的是，`inject` 函数的第一个参数是要注入的属性名称，即 `$myGlobalProperty`，它是一个字符串类型的值。如果这个属性不存在，则 `inject` 函数会返回 `undefined`。如果你需要为这个全局属性提供默认值，可以使用 `inject` 函数的第二个参数：

const myGlobalProperty = inject('$myGlobalProperty', defaultValue)

其中，`defaultValue` 是当 `$myGlobalProperty` 这个全局属性不存在时的默认值。

ue3在main.ts里全局挂载了个属性，组件里怎么仔在setup里引用后是undefined

如果你在 `main.ts` 中全局挂载了一个属性，但在组件中使用 `inject` 函数引用时返回 `undefined`，可能是因为你在组件中引用的时候，全局属性还没有被挂载。

Vue 3 中，组件的 `setup` 函数在组件实例创建之前就会被调用，因此如果你在 `main.ts` 中挂载全局属性的代码出现在组件的 `setup` 函数之后，那么在组件中使用 `inject` 函数引用全局属性时，这个全局属性还未被挂载，因此会返回 `undefined`。

为了解决这个问题，你可以将全局属性的挂载代码放在组件的 `setup` 函数之前，或者将全局属性挂载到 Vue 实例上，而不是 Vue 应用程序实例上。例如：

// 在 main.ts 中挂载全局属性到 Vue 实例上
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 在 Vue 实例上挂载全局属性
app.config.globalProperties.$myGlobalProperty = 'some value'

app.mount('#app')

然后在组件的 `setup` 函数中使用 `inject` 函数来引用这个全局属性：

import { defineComponent, inject } from 'vue'

export default defineComponent({
  setup() {
    // 使用 inject 函数来引用全局属性
    const myGlobalProperty = inject('$myGlobalProperty')

    return {
      myGlobalProperty
    }
  }
})

这样，你就可以在组件中访问 `$myGlobalProperty` 这个全局属性了。需要注意的是，`inject` 函数的第一个参数是要注入的属性名称，即 `$myGlobalProperty`，它是一个字符串类型的值。如果这个属性不存在，则 `inject` 函数会返回 `undefined`。如果你需要为这个全局属性提供默认值，可以使用 `inject` 函数的第二个参数：

const myGlobalProperty = inject('$myGlobalProperty', defaultValue)

其中，`defaultValue` 是当 `$myGlobalProperty` 这个全局属性不存在时的默认值。