[英]How to access global mixin's methods in TypeScript Vue component?
I'm developing a Vue app using TypeScript.我正在使用 TypeScript 开发 Vue 应用程序。 I created a mixin (shown in
global.mixin.js
below), and registered it with Vue.mixin()
(shown in main.ts
below).我创建了一个 mixin(显示在下面的
global.mixin.js
中),并将它注册到Vue.mixin()
(显示在下面的main.ts
中)。
import { mathHttp, engHttp } from '@/common/js/http'
export default {
methods: {
wechatShare(config) {
config.imgUrl = config.imgUrl
mathHttp.get('/wechat/config', {
url: encodeURIComponent(window.location.href),
}).then((data) => {
wx.config({
debug: false,
appId: data.appId,
timestamp: data.timestamp,
nonceStr: data.noncestr,
signature: data.signature,
jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'],
})
})
wx.ready(() => {
wx.updateAppMessageShareData(config)
wx.updateTimelineShareData(config)
})
},
},
}
I registered the global mixin with Vue.mixin()
:我用
Vue.mixin()
注册了全局 mixin:
import globalMixins from './mixins/global.mixin'
Vue.mixin(globalMixins)
But when I try to access the mixin method from within a Vue component, I get an error:但是当我尝试从 Vue 组件中访问 mixin 方法时,出现错误:
property wechatShare doesn't exist on type Test.vue
<script lang='ts'>
import { Component, Prop, Vue } from 'vue-property-decorator'
@Component({ components: { } })
export default class Test extends Vue {
created() {
this.setWeChatShare()
}
setWeChatShare() {
this.wechatShare
}
}
</script>
How can I solve this problem?我怎么解决这个问题?
vue-property-decorator
uses the same semantics for mixins from vue-class-component
. vue-property-decorator
对来自vue-class-component
mixin使用相同的语义。 Based on the example from vue-class-component
docs, the mixin takes the same form as a component:根据
vue-class-component
文档中的示例,mixin 采用与组件相同的形式:
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class MyMixin extends Vue {
wechatShare(config) {
//...
}
}
Using the Mixins
from vue-property-decorator
(or mixins
from vue-class-component
), wrap your custom mixin, and extend it with your component:使用
Mixins
从vue-property-decorator
(或mixins
来自vue-class-component
),包住您的自定义的mixin,并与您的组件扩展它:
import { Component, Mixins } from 'vue-property-decorator'
// OR
// import Component, { mixins } from 'vue-class-component'
import MyMixin from './mixin'
@Component
export default class App extends Mixins(MyMixin) {
mounted() {
this.wechatShare(/* ... */)
}
}
For those who want to use mixin globally and prevent importing in every component, this is what you can do.对于那些想要全局使用 mixin 并防止在每个组件中导入的人来说,这就是你可以做的。
import { Vue, Component } from 'vue-property-decorator'
import Colors from "@/values/Colors"
import Strings from "@/values/Strings";
@Component
export default class Values extends Vue {
public test = 'Hello, hello, hello';
public colors: {} = Colors.light;
public strings: {} = Strings.pt
}
import Values from "@/values/Values";//my Mixin
Vue.mixin(Values)
// add the variables,functions ... inside the vue interface and then you will good to use them anywhere.
interface Vue {
colors,
strings
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.