从导入的文件访问 vue

Posted 2023-03-14

【中文标题】从导入的文件访问 vue

【英文标题】：Access vue from imported file

【发布时间】：2018-07-09 20:56:19

【问题描述】：

我正在尝试从 required javascript 文件访问我的 Vue 元素，但到目前为止我失败了...我想从外部获取 element-ui 的 el-form-item 组件的规则验证器。也许我的逻辑是错误的，但这种方式也应该有效（我猜）

Vue@2.5.13 element-ui@2.0.11 npm@5.6.0

---

Vue.use(...)

我试过Vue.use(...) 我的 javascript 文件。

const MyPlugin = 
    install(Vue, options) 
        Vue.prototype.usernameValidator = function (rule, value, callback) 
            console.log(Vue);
            console.log(this);
            // ...

我的控制台输出：

console.log(Vue);

ƒ Vue$3（选项） if ("开发" !== '生产' && !（这个 Vue$3 实例） ) warn('Vue 是一个构造函数，应该使用new 关键字调用'); this._init(options);

console.log(this);

"required":true,"field":"username","fullField":"username","type":"string"...

---

创建前

module.exports = function (rule, value, callback) 
    console.log(this)
    // ...
);

console.log(this);

"required":true,"field":"username","fullField":"username","type":"string"...

---

正如我所说，我的逻辑可能是错误的，但我只是好奇我可以制作这样的方法吗？

问候

---

---

更新

我打电话给register.blade.php

<el-form-item label="Username" prop="username" :rules="[required:true, validator: usernameValidator, trigger:'blur,change']">
    <el-input v-model="form.username" name="username"></el-input>
</el-form-item>

在app.js;

Vue.use(require('./plugins/usernameValidator'));
// ...
window.app = new Vue(
    // ...
);

【参考方案1】：

你在哪里requireing 元素？我将详细说明我通常如何使用您的示例创建插件。

定义一个插件：

// my-plugin.js
import FormItem from 'element-ui'

const MyPlugin = 
    install(Vue, options) 
        Vue.prototype.usernameValidator = function (rule, value, callback) 
            // use FormItem's validator

然后通过Vue.use注册插件：

// app.js
import MyPlugin from 'my-plugin'
// or require 
const MyPlugin = require('my-plugin')

Vue.use(MyPlugin)

稍后在一个组件中，调用插件中定义的usernameValidator方法：

<template>
     <input name="username" v-model="username" :class="isValidUsername ? 'borderGreen' : 'borderRed'" />
     <div> usernameFeedback </div>
</template>

export default 
    beforeCreate () 
          // what would you validate in here?
          // this.usernameValidator(rule, value, callback)
    ,
    data () 
        return 
             username: null,
             usernameFeedback: null
        
    ,
    computed: 
        isValidUsername () 
              // assuming the validator returns a boolean, valid/invalid
              return this.usernameValidator(rule, this.username, this.validationCallback)
        
    ,
    methods: 
        validationCallback (feedback) 
             this.usernameFeedback = feedback
        
    

如果您有一个如何require 组件的示例，我可以更新我的答案，但您可以使用this 访问组件中的插件方法。

【讨论】：

嗨，很抱歉回复晚了。我要求Vue.use(require('./plugins/usernameValidator'));，但我认为您需要知道 element-ui 才能回答我的问题。谢谢

我对元素 UI 以及许多其他 UI 库非常熟悉。我刚刚注意到您帖子中的一些内容对您的问题没有意义。也许那只是我。塔。

更新问题。如果需要任何信息来解决我的问题，请告诉我...再次感谢：]