未使用 VueJS mixins 定义的属性

Posted

技术标签:

【中文标题】未使用 VueJS mixins 定义的属性【英文标题】:Property not defined with VueJS mixins 【发布时间】:2019-05-30 06:03:37 【问题描述】:

我尝试将 Mixins 与 Vue.js 一起使用。但我遇到了几个问题:/

这是我的两个测试模块的当前代码:

ErrorBaseMixin.vue

<script>
    import ErrorAlert from './ErrorAlert';

    export const ErrorBaseMixin = 
        data() 
            return 
                // Errors management
                error_display: true,
                error_data: 
                    level: "warning",
                    time: 0,

                    status: 200,
                    message: ""
                
            
        ,
        methods: 
            // ------------------------------------------------------------------------
            // Errors management functions
            // ------------------------------------------------------------------------
            error_function_show_error: function() 
                try 
                    this.$refs.error_component.launch();
                
                catch 
            ,

            callback_error_catched: function(e) 
                if(e.message === 'Network Error')
                    this.error_data.message = "<strong>There was a network error :</strong> The connection is broken or the server is not started.";
                    this.error_data.level = "danger";
                
                else 
                    this.error_data.message = "An error occured : " + e.message;
                    this.error_data.level = "warning";
                

                this.error_function_show_error();
            ,
        ,
        components: 
            ErrorAlert
        
    

    export default ErrorBaseMixin;
</script>

Test.vue

<template>
        <ErrorAlert
            :error_display="error_display"
            :error="error_data"
            ref="error_component"
        />
    </div>
</template>

<script lang="js">
    import ErrorBaseMixin from '../../../parts/ErrorBaseMixin.vue';

    export default 
        mixins: [ErrorBaseMixin],
        name: 'Test_elt',
        created() 
            this.REST_ADDR = "test/test";
        ,
        data() 
            return 
                field: 
                    id: '55',
                    name: 'test'
                
            
        ,
        methods: 

        
    
</script>

但是当我编译最后一个模块时,我的浏览器控制台出现以下错误:

[Vue 警告]:属性或方法“error_data”未在 实例,但在渲染期间引用。确保该属性是 反应式,无论是在数据选项中还是对于基于类的组件,通过 初始化属性。

[Vue 警告]:未知的自定义元素:- 你注册了吗 组件正确吗?对于递归组件,请确保 提供“名称”选项。

但是...一切正常。所以我不明白为什么我有这些错误

【问题讨论】:

您可以尝试在ErrorBaseMixin.vue 中设置name 属性吗?这可能会完全排除警告。 Mixins 应该只是一个 js 文件。所以只需将文件名从ErrorBaseMixin.vue 更改为ErrorBaseMixin.js 并删除周围的&lt;script&gt; 标签。 首先是export const ErrorBaseMixin,然后是export default ErrorBaseMixin; 【参考方案1】:

您必须将 ErrorBaseMixin.vue 更改为 ErrorBaseMixin.js:

import ErrorAlert from './ErrorAlert';

const ErrorBaseMixin = 
    data() 
        return 
            // Errors management
            error_display: true,
            error_data: 
                level: "warning",
                time: 0,

                status: 200,
                message: ""
            
        
    ,
    methods: 
        // ------------------------------------------------------------------------
        // Errors management functions
        // ------------------------------------------------------------------------
        error_function_show_error: function() 
            try 
                this.$refs.error_component.launch();
            
            catch 
        ,

        callback_error_catched: function(e) 
            if(e.message === 'Network Error')
                this.error_data.message = "<strong>There was a network error :</strong> The connection is broken or the server is not started.";
                this.error_data.level = "danger";
            
            else 
                this.error_data.message = "An error occured : " + e.message;
                this.error_data.level = "warning";
            

            this.error_function_show_error();
        ,
    ,
    components: 
        ErrorAlert
    


export default ErrorBaseMixin;

然后导入你的组件:

import ErrorBaseMixin from '../../../parts/ErrorBaseMixin.js';
export default 
    mixins: [ErrorBaseMixin],
...

注意:注意如何导入导出,我已经改变了方式。

【讨论】:

你帮助我走上了正轨,但我不得不在最后几行中将 import ErrorBaseMixin from 'somefilename.vue' 改为 import ErrorBaseMixin from 'somefilename.js'

以上是关于未使用 VueJS mixins 定义的属性的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Vuejs 的 main.js 中使用 Mixin?

Vuejs - 使用 router.push() 时未定义的属性“id”

Vuex + VueJS:未定义将计算属性传递给孩子

TypeError:无法读取未定义 Vuejs 的属性“_isDestroyed”

无法读取未定义的 VueJS Firebase 的属性“forEach”

TypeError:无法读取未定义的属性(读取“集合”)-Vuejs 和 Firebase