Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(runtime-core): add ComponentCustomProperties interface #982

Merged
merged 5 commits into from
Apr 17, 2020

Conversation

posva
Copy link
Member

@posva posva commented Apr 17, 2020

Export an interface to allow typing for TS and JS users (free autocompletion) to custom added properties.

Here is an example of adding a property $router to every component instance:

import { createApp } from 'vue'
import { Router, createRouter } from 'vue-router'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $router: Router
  }
}

// effectively adding the router to every component instance
const app = createApp({})
const router = createRouter()
app.config.globalProperties.$router = router

const vm = app.mount('#app')
// we can access the router from the instance
vm.$router.push('/')

@posva
Copy link
Member Author

posva commented Apr 17, 2020

There seems to be an unrelated test failing (I only changed typings)

@yyx990803 yyx990803 merged this pull request into master Apr 17, 2020
@yyx990803
Copy link
Member

Ugh, why does GitHub forget the preference and reverted back to normal merge? This has happened a few times lately.

@yyx990803 yyx990803 deleted the feat/component-custom-properties-ts branch April 17, 2020 13:11
@yyx990803
Copy link
Member

I manually squashed and force pushed ¯_(ツ)_/¯

pikax pushed a commit to pikax/vue-next that referenced this pull request Apr 29, 2020
@bhabgs
Copy link

bhabgs commented Aug 27, 2020

Why not on the d.ts use it ?

(为什么不能在d.ts 中设置这个?)

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $router: Router
  }
}

@spaspa spaspa mentioned this pull request Oct 7, 2020
@tcstory
Copy link

tcstory commented Dec 14, 2020

Why not on the d.ts use it ?

(为什么不能在d.ts 中设置这个?)

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $router: Router
  }
}

I also want to known why I can not place the code in the shims-vue.d.ts. I had tried to place the code in shims-vue.d.ts, and i got another errors.

@Zenthae
Copy link

Zenthae commented Feb 27, 2021

Why not on the d.ts use it ?
(为什么不能在d.ts 中设置这个?)

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $router: Router
  }
}

I also want to known why I can not place the code in the shims-vue.d.ts. I had tried to place the code in shims-vue.d.ts, and i got another errors.

you have to put the new declaration in the main.ts file

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants