vueComponent/ant-design-vue

按照文档说明，在vue3中通过globalProperties全局注册message后，如何使用？

H-Sven opened this issue · 12 comments

H-Sven commented
  • I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

app.config.globalProperties.$message = message
这样注册后，组件中如何使用

What does the proposed API look like?

app.config.globalProperties.$message = message
这样注册后，组件中如何使用

gk-shi commented

vue 3 也支持 vue 2的 options API，如果你用 options API 的写法，应该就可以 this.$message({/.../})调用了。

至于 vue 3 想在 composition API 中使用，我也没找到什么好的方法...或许可以使用 provide/inject，要不就每次import { Message } from 'ant-design-vue'。这种方法我没有详细去研究，可能每次引入都会创建一个新的对象，有点耗性能吧....

关于全局变量的使用方法，我也从 vue 3 的 issue 一直找，都没找到好的(或许我没注意吧)，似乎尤大有在 issue 中回复说全局的东西用 provide/inject 注入，这样也能够清晰知道是来自哪里😂

如果兄弟你找到了好的方法，还麻烦告知一声~

dong-lucky-ticket commented

大致研究了一下，个人猜测是这样的(实测行得通)。
const app = createApp(App)
const value = 'Hello Vue3 and Vite!'

app.use(antd)

// Vue3 中Composition API 可用 (inject('$message'))
app.provide('$message', value)

// Vue2 中Option API可用 (this.$message)
app.config.globalProperties.$message = value

H-Sven commented

@gk-shi @dong19950 之前在vantUI的交流群中得到了解答

可以使用如下方法获取，但是这个api并没有在vue3的文档中写，所以好像是说不建议使用

app.config.globalProperties.$message = message 全局注册后

setup() {
    const { ctx } = getCurrentInstance() // 获取上下文，类似原来的this
    const showMessage = () => {
      ctx.$message.success('this is message')
    }
    return {
      showMessage
    }
  }
gk-shi commented

@H-Sven 这个方法我有试过，但是 getCurrentInstance()的返回值可能是 null ，所以我没敢用，没有看到它关于返回 null 的可能原因😹

Amour1688 commented 
import { message } from 'ant-design-vue'

可以在 setup 里面直接调用

  • 👍2
sun519 commented

大致研究了一下，个人猜测是这样的(实测行得通)。
const app = createApp(App)
const value = 'Hello Vue3 and Vite!'

app.use(antd)

// Vue3 中Composition API 可用 (inject('$message'))
app.provide('$message', value)

// Vue2 中Option API可用 (this.$message)
app.config.globalProperties.$message = value

大致研究了一下，个人猜测是这样的(实测行得通)。
const app = createApp(App)
const value = 'Hello Vue3 and Vite!'

app.use(antd)

// Vue3 中Composition API 可用 (inject('$message'))
app.provide('$message', value)

// Vue2 中Option API可用 (this.$message)
app.config.globalProperties.$message = value

试了下，不行 啊

gk-shi commented

大致研究了一下，个人猜测是这样的(实测行得通)。
const app = createApp(App)
const value = 'Hello Vue3 and Vite!'
app.use(antd)
// Vue3 中Composition API 可用 (inject('$message'))
app.provide('$message', value)
// Vue2 中Option API可用 (this.$message)
app.config.globalProperties.$message = value

大致研究了一下，个人猜测是这样的(实测行得通)。
const app = createApp(App)
const value = 'Hello Vue3 and Vite!'
app.use(antd)
// Vue3 中Composition API 可用 (inject('$message'))
app.provide('$message', value)
// Vue2 中Option API可用 (this.$message)
app.config.globalProperties.$message = value

试了下，不行 啊

// main.ts

import { message } from 'ant-design-vue'

const app = createApp(App)
app.config.globalProperties.$message = message
app.provide('$message', message)
// ...
// home.vue

// ....  Composition API     vue 3.0 写法
setup () {
  const mes = inject('$message')
   mes.success('test $message injected.')
}

// ....   options API    //  vue 2.0 写法，去绑定事件或者其他操作都行
methods: {
  testMessage () {
      this.$message.success('测试 options API message')
    }
}


// ...

这两种方式我测试都是可行的，对于getCurrentInstance()在 Composition API 中我前面有使用验证过，也是可行的(当然，我偶尔碰到过一次是 null的，忘记是怎么个情形了)

不知道你还有哪里设置不可以吗😋

dong-lucky-ticket commented

大致研究了一下，个人猜测是这样的(实测行得通)。
const app = createApp(App)
const value = 'Hello Vue3 and Vite!'
app.use(antd)
// Vue3 中Composition API 可用 (inject('$message'))
app.provide('$message', value)
// Vue2 中Option API可用 (this.$message)
app.config.globalProperties.$message = value

大致研究了一下，个人猜测是这样的(实测行得通)。
const app = createApp(App)
const value = 'Hello Vue3 and Vite!'
app.use(antd)
// Vue3 中Composition API 可用 (inject('$message'))
app.provide('$message', value)
// Vue2 中Option API可用 (this.$message)
app.config.globalProperties.$message = value

试了下，不行 啊

// main.ts

import { message } from 'ant-design-vue'

const app = createApp(App)
app.config.globalProperties.$message = message
app.provide('$message', message)
// ...
// home.vue

// ....  Composition API     vue 3.0 写法
setup () {
  const mes = inject('$message')
   mes?.success('test $message injected.')
}

// ....   options API    //  vue 2.0 写法，去绑定事件或者其他操作都行
methods: {
  testMessage () {
      this.$message.success('测试 options API message')
    }
}


// ...

这两种方式我测试都是可行的，对于getCurrentInstance()在 Composition API 中我前面有使用验证过，也是可行的(当然，我偶尔碰到过一次是 null的，忘记是怎么个情形了)

不知道你还有哪里设置不可以吗😋

// .... Composition API vue 3.0 写法 setup () { const mes = inject('$message') mes?.success('test $message injected.') }
我使用是可以的。特意重试了一遍，你那边有错误
1.、结构出来的组件是Message，而不是message
2、mes? 不知道是不是笔误？

dong-lucky-ticket commented

统一回复，provide/inject这样使用，可以直接复制代码运行

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import { Message } from 'ant-design-vue'
// 没有按需引入的话，需要引入以下css
// import 'ant-design-vue/dist/antd.css'

const app = createApp(App)

app.provide('$message', Message)

app.mount('#app')


// HelloWorld.vue

import { onMounted, inject } from 'vue'

export default {
  setup() {
    const message = inject('$message')
    onMounted(() => {
      message.warning('听说不能成功？')
    })
  }
}
sun519 commented

@gk-shi @dong19950 之前在vantUI的交流群中得到了解答

可以使用如下方法获取，但是这个api并没有在vue3的文档中写，所以好像是说不建议使用

app.config.globalProperties.$message = message 全局注册后

setup() {
    const { ctx } = getCurrentInstance() // 获取上下文，类似原来的this
    const showMessage = () => {
      ctx.$message.success('this is message')
    }
    return {
      showMessage
    }
  }

如果项目是完整引入了Antd的组件而不是按模块引入message组件，该如何使用provide/inject?哪位壮士给解答一下？

gk-shi commented

大致研究了一下，个人猜测是这样的(实测行得通)。
const app = createApp(App)
const value = 'Hello Vue3 and Vite!'
app.use(antd)
// Vue3 中Composition API 可用 (inject('$message'))
app.provide('$message', value)
// Vue2 中Option API可用 (this.$message)
app.config.globalProperties.$message = value

大致研究了一下，个人猜测是这样的(实测行得通)。
const app = createApp(App)
const value = 'Hello Vue3 and Vite!'
app.use(antd)
// Vue3 中Composition API 可用 (inject('$message'))
app.provide('$message', value)
// Vue2 中Option API可用 (this.$message)
app.config.globalProperties.$message = value

试了下，不行 啊

// main.ts

import { message } from 'ant-design-vue'

const app = createApp(App)
app.config.globalProperties.$message = message
app.provide('$message', message)
// ...
// home.vue

// ....  Composition API     vue 3.0 写法
setup () {
  const mes = inject('$message')
   mes?.success('test $message injected.')
}

// ....   options API    //  vue 2.0 写法，去绑定事件或者其他操作都行
methods: {
  testMessage () {
      this.$message.success('测试 options API message')
    }
}


// ...

这两种方式我测试都是可行的，对于getCurrentInstance()在 Composition API 中我前面有使用验证过，也是可行的(当然，我偶尔碰到过一次是 null的，忘记是怎么个情形了)
不知道你还有哪里设置不可以吗😋

// .... Composition API vue 3.0 写法 setup () { const mes = inject('$message') mes?.success('test $message injected.') }
我使用是可以的。特意重试了一遍，你那边有错误
1.、结构出来的组件是Message，而不是message
2、mes? 不知道是不是笔误？

第一点：
我解构出来 message 我是真实代码实验过了的，Message我没试过，但我估计Message解构的是组件，message解构的是全局方法吧。

第二点：那个问号，因为我自己写的是ts，然后这里回复的时候我把类型判断全去了，那个问号应该是我习惯性对属性的非空判断加上去了😹

gk-shi commented

@gk-shi @dong19950 之前在vantUI的交流群中得到了解答
可以使用如下方法获取，但是这个api并没有在vue3的文档中写，所以好像是说不建议使用
app.config.globalProperties.$message = message 全局注册后

setup() {
    const { ctx } = getCurrentInstance() // 获取上下文，类似原来的this
    const showMessage = () => {
      ctx.$message.success('this is message')
    }
    return {
      showMessage
    }
  }

如果项目是完整引入了Antd的组件而不是按模块引入message组件，该如何使用provide/inject?哪位壮士给解答一下？

完整引入之后，antd 是在全局挂载了对应方法的。
如果是用options API的方法，还是直接this.$message就能调用。
如果是用Composition API的话，我目前知道的是可以通过上面说到的getCurrentInstance()方法获取到根实例，然后.$message调用的。

如果想provide/inject，我暂时没有去实验过，但我觉得可能还是要自己单独把message解构，然后再app.provide('$message', message)这样吧，因为我觉得这样会比较符合vue 3设计的准则，就是你在inject的时候，能明确知道是哪里provide的。

虽然这样看起来变繁琐了，但可能对于属性、方法流向比较明确吧.😊

如果所述有误或者没有涉及的，还望各位大佬批评指正和补充一下，我也能顺带学习一下😋