代码之家 › 专栏 › 技术社区 › blackbird

无法通过插件访问vue.js全局函数

vuejs2 vue.js javascript

blackbird · 技术社区 · 5 年前

我正在尝试将一些常用函数重构为我的应用程序的全局可用的util插件。我遵循了 docs 和 this question ,但我不确定如何使用它模板和vue中的函数一直抱怨未定义的方法。理想情况下我只想打电话 isEmpty 从任何子组件。

实用程序js

export default {
  install(Vue, options) {
      Vue.isEmpty = function (object) {
        return false // dummy function for now to check if method works
      }
  }
}

也尝试过:

Util.install = function (Vue, options) {
  Vue.isEmpty = function () {
    ...
  }
  // this doesn't work either
  // Vue.prototype.$isEmpty = function (object) {
  // return false
  //  }
}

主.js

import util from './components/shared/util.js'
import comp from './components/shared/myComponent.js'
// Vue.component('util', util) this doesn't work
Vue.use(util)

const app = new Vue({
...
components: {
    comp
}).$mount('#app')

下面这些都不起作用。抛出的错误是 TypeError: Cannot read property 'isEmpty' of undefined

组件模板

<p v-if="util.isEmpty(license)" class="margin-0">N/A</p>
<p v-if="Vue.isEmpty(license)" class="margin-0">N/A</p>
<p v-if="isEmpty(license)" class="margin-0">N/A</p>

1 回复 | 直到 5 年前

Robson Braga 5 年前

你快完成了,错过了 prototype . 试试这个:

Utils.js公司

export default {
  install(Vue, options) {
      Vue.prototype.isEmpty = function (object) {
        return false // dummy function for now to check if method works
      }
  }
}

组成部分

<p v-if="isEmpty(license)" class="margin-0">N/A</p>

这里有一个例子: https://codesandbox.io/s/vue-template-tdx00

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

2 年前