Vuejs 属性或方法未在实例上定义，但在渲染期间引用

Posted 2023-02-23

【中文标题】Vuejs 属性或方法未在实例上定义，但在渲染期间引用

【英文标题】：Vuejs Property or method is not defined on the instance but referenced during render

【发布时间】：2018-07-13 19:28:33

【问题描述】：

我是 VueJS 的新手，我正在尝试创建一个自定义表单组件。

我正在使用http://element.eleme.io 元素。于是我新建了一个 Form.vue 文件

<template>
    <el-form :model="data">
        <slot></slot>
    </el-form>
</template>

<script>
  import  FormItem, Input  from 'element-ui';
  export default 
    name: 'general-form',
    components: 
        FormItem,
        Input
    ,
    props: ['data'],
    mounted: function() 
        console.log(this.data);
    
  

</script>

这是我的 app.js

// Element.io
import  Form, FormItem, Input  from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// Custom
import GeneralForm from '../../components/presentational-subsystem/form/Form.vue';

Vue.use(Form);
Vue.use(FormItem);
Vue.use(Input);

Vue.config.devtools = true;

var contactsPage = new Vue(
  el: '#contacts-page',
  components:  
    GeneralForm
  
);

这是我的观点：

<div id="contacts-page">

<general-form id="contacts-form" :data="subject: 'abc'" action="/contacts" method="post">
  <el-form-item label="Subject" prop="subject">
    <el-input v-model="data.subject"></el-input>
  </el-form-item>       
</general-form>

</div>

但我在控制台中收到此错误：

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

我知道如果我把 Vue 对象改成这样：

var contactsPage = new Vue(
  el: '#contacts-page',
  data:  formData:  
  components:  
    GeneralForm
  
);

错误消失了，但是表单不再是反应性的。我试着按照这个例子：

http://element.eleme.io/#/en-US/component/form

我的标记实际上是相同的，但是当我使用 Vue 开发工具时，我可以看到我的 Form.vue 组件中的 formData 变量与我的 Vue 实例中的共享 formData 变量不同。

我的问题是如何让 <el> 元素使用我创建的表单组件中的 formData？

【参考方案1】：

当您使用slot 时，它的范围——它的数据来自哪里——是父级。您的插槽的内容引用您在子级中定义的formData。您可以使用 scoped slots 将子数据传递到插槽

或者，您可以在父级中完全定义formData，并将其作为prop 传递给子级，子级将其作为道具传递给el-form。

这个结构：

<el-form :model="formData">
    <slot></slot>
</el-form>

您是否将formData 从您的Form 组件传递到el-form 组件。它不会传递到插槽。插槽不是子级，它们是从父级注入的代码。

父代码：

<general-form id="contacts-form" action="/contacts" method="post">
  <el-form-item label="Subject" prop="subject">
    <el-input v-model="formData.subject"></el-input>
  </el-form-item>       
</general-form>

正在创建您的 Form 组件的实例并注入 el-form-item 作为插槽内容。您遇到的错误是在该插槽内容中引用 formData，因为插槽的上下文是父级。插槽对注入的内容一无所知（除非您使用作用域插槽）。

在更新的代码中：

<general-form id="contacts-form" :data="subject: 'abc'" action="/contacts" method="post">
  <el-form-item label="Subject" prop="subject">
    <el-input v-model="data.subject"></el-input>
  </el-form-item>       
</general-form>

您在此处将 data 道具传递给 Form 孩子，但尝试在插槽内容中使用它。 el-input 正在父级中查找 data。试试这个：

var contactsPage = new Vue(
  el: '#contacts-page',
  data: 
    data:  subject: 'abc' 
  ,
  components:  
    GeneralForm
  
);

和

<general-form id="contacts-form" :data="data" action="/contacts" method="post">
  <el-form-item label="Subject" prop="subject">
    <el-input v-model="data.subject"></el-input>
  </el-form-item>       
</general-form>

【讨论】：

我未能完全理解您的评论。因此，如果我的 Form.vue 中有 ，这是否意味着我将 formData 作为道具传递给我的孩子？

你能看一下更新后的问题吗？我更新了代码。我使用了您提供的替代方法，我将 Object 作为道具从 html 文件发送到 Form.vue，并将其传递给带有 prop 的 el-form。但是我仍然收到相同的错误消息，我做错了什么？

现在可以了，但我也想问一下是否可以在实际的Form组件中隐藏表单数据？我也想知道我是否使用这种方法，我可以在运行时编辑数据对象吗？因为它是作为道具传递的，所以我想我不能再编辑它了。

让孩子communicate with the parent 更新道具。我知道你是 Vue 新手，有很多基础知识需要学习。这是一个很大的。