Vue单文件组件如何访问app对象?
How to access the app object from a Vue single file component?
My end goal: I'm using a custom HTML element in a component template (<gcse:searchresults-only>
) and I'd like to register the element with Vue。该页面给出的注册自定义元素的方法是通过app.config.compilerOptions.isCustomElement
.
但我使用的是 single file component 并且未定义全局 app
对象。有没有办法获得它?或者是否有其他方法可以从单个文件组件中设置配置选项?
我需要从这个组件外部设置它吗?我想因为我在这里只使用这个自定义元素,所以只有这个文件必须知道它而不是在某些全局上下文中管理它是有意义的。
以防万一,我实际上是在 Gridsome 内进行的。
我们就是这样做的(就像在文档中一样)。我认为让它在全球范围内可用是很好的,因为它还会有一堆 ESLint 警告等
vue.config.js
module.exports = {
chainWebpack: config => {
// ignore errors about external custom html elements
config.module.rule('vue').use('vue-loader').tap(options => ({
...options,
compilerOptions: {
isCustomElement: tag => tag === 'gcse:searchresults-only',
},
}));
},
};
My end goal: I'm using a custom HTML element in a component template (<gcse:searchresults-only>
) and I'd like to register the element with Vue。该页面给出的注册自定义元素的方法是通过app.config.compilerOptions.isCustomElement
.
但我使用的是 single file component 并且未定义全局 app
对象。有没有办法获得它?或者是否有其他方法可以从单个文件组件中设置配置选项?
我需要从这个组件外部设置它吗?我想因为我在这里只使用这个自定义元素,所以只有这个文件必须知道它而不是在某些全局上下文中管理它是有意义的。
以防万一,我实际上是在 Gridsome 内进行的。
我们就是这样做的(就像在文档中一样)。我认为让它在全球范围内可用是很好的,因为它还会有一堆 ESLint 警告等
vue.config.js
module.exports = {
chainWebpack: config => {
// ignore errors about external custom html elements
config.module.rule('vue').use('vue-loader').tap(options => ({
...options,
compilerOptions: {
isCustomElement: tag => tag === 'gcse:searchresults-only',
},
}));
},
};