未使用 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
并删除周围的<script>
标签。
首先是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”
TypeError:无法读取未定义 Vuejs 的属性“_isDestroyed”